javascript iframe 컨텐츠에 맞게 높이 자동 조절

아이프레임은 기본적으로 로드를 호스트하는 페이지에 정적인 높이값을 지니게 됩니다. 로드되는 페이지의 높이에 맞춰 값을 조정하기 위해서는 별도의 자바스크립트 코드가 필요합니다.

 

Same-Domain Iframes

동일한 도메인 iframe의 경우 상위 페이지에서만 코드 변경이 필요합니다. iframe 페이지에는 코드 변경이 필요하지 않습니다.

• iframe이 로드된 후 contentDocument.body.scrollHeight 속성은 전체 높이를 가져 옵니다.
• contentDocument.body.scrollWidth 속성은 전체 넓이를 가져 옵니다.

<iframe src="child.html" id="child-iframe"></iframe>

<script>
  let iframe = document.querySelector("#child-iframe");

  iframe.addEventListener('load', function() {
    iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
    iframe.style.width = iframe.contentDocument.body.scrollWidth + 'px';
  });	
</script>

 

Cross-Domain Iframes

크로스 도메인 iframe의 경우 iframe과 상위 페이지 모두 코드를 수정 해야합니다.

 iframe이 로드된 후 사이즈는 postMessage()를 사용하여 상위 페이지로 전달됩니다 .

window.addEventListener('load', function() {
  let message = { height: document.body.scrollHeight, width: document.body.scrollWidth };	

  window.top.postMessage(message, "*");
});

상위 페이지에서 메시지가 수신되고 iframe 사이즈가 업데이트 됩니다.

<iframe src="https://cross-domain.com/child.html" id="child-iframe"></iframe>

<script>
  let iframe = document.querySelector("#child-iframe");

  window.addEventListener('message', function(e) {
    let message = e.data;

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

 

jQuery iFrame Resizer 플러그인

• iFrame Resizer
• iFrame Resizer Docs