[javaScript] iframe으로 페이지 불러올 때 높이값 조정

iframe으로 다른 홈페이지를 불러올 때 해당 홈페이지의 컨텐츠 영역만큼 높이값이 조정되지 않고 스크롤이 생겨버리는 현상이 있다.

 

iframe에 불러온 컨텐츠의 높이값을 구해 대입해주면 유동적으로 높이가 조절된다.

 

<iframe src="" id="iframe" frameborder="0" width="100%" scrolling="no"></iframe>

 

// iframe으로 불러올 페이지에 추가
<script>
window.addEventListener('load', function() {
  let message = {height: document.body.scrollHeight};	

  window.top.postMessage(message, "*");
});
</script>


// iframe을 삽입한 상위 페이지에 추가
<script type="text/javascript">
  let iframe = document.getElementById('iframe');
  
  window.addEventListener('message', function(e) {
    let message = e.data;

    iframe.style.height = message.height + "px";
  } , false);
</script>

 

 

 

*출처

https://velog.io/@seoyaon/Javascript-%EC%95%84%EC%9D%B4%ED%94%84%EB%A0%88%EC%9E%84iframe-%EB%86%92%EC%9D%B4-%EC%9E%90%EB%8F%99-%EC%A1%B0%EC%A0%88-%ED%95%98%EA%B8%B0feat.-%ED%81%AC%EB%A1%9C%EC%8A%A4-%EB%8F%84%EB%A9%94%EC%9D%B8