아이프레임 자동높이 재질문

아이프레임 자동높이 재질문

QA

아이프레임 자동높이 재질문

답변 2

본문

부모파일


<iframe src="01.html" id="myiframe" scrolling="no" width="300"></iframe>
<script type="text/javascript">
  let iframe = document.getElementById('myiframe');
  
  window.addEventListener('message', function(e) {
    let message = e.data;
    iframe.style.height = message.height + "px";
  } , false);
</script>

 

자식파일 (01.html)


<script type="text/javascript">
window.addEventListener('load', function() {
  let message = {height: document.body.scrollHeight};    
  window.top.postMessage(message, "*");
});
</script>
 
<div style="height:500px; background:#ccc;">
<a href="02.html">이동</a>
</div>

 

자식파일 (02.html)


<script type="text/javascript">
window.addEventListener('load', function() {
  let message = {height: document.body.scrollHeight};    
  window.top.postMessage(message, "*");
});
</script>
 
<div style="height:300px; background:#555;">
<a href="01.html">이동</a>
</div>

 

main.html 구동시 아이프레임 내에서 링크 이동시, 파일 높이에 맞게 조절이 되지 않습니다.

방법이 있을까요..?

이 질문에 댓글 쓰기 :

답변 2

최초 iframe 로드시엔 현재 높이를 부모에 전달하지만

이후 자식 iframe 내에서 링크를 이동할때

이동한 페이지에서는 현재 높이를 부모에게 전달하지 않아서 그렇습니다.

 

최초 로드시 부모에게 전달하는 코드를 모든 페이지에 넣어주시거나

_head.php 처럼 공통으로 include 하는곳에 넣어주셔야 합니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 133
© SIRSOFT
현재 페이지 제일 처음으로