아이프레임(iframe) 높이 자동으로 맞추기

아이프레임은 기본적으로 로드를 호스트하는 페이지에 정적인 높이값을 지니게 됩니다. 로드되는 페이지의 높이에 맞춰 값을 조정하기 위해서는 별도의 자바스크립트 코드가 필요합니다. 다만 아래 방법들은 같은 도메인 또는 같은 서버 안에 소스들이 있을 때만 유효합니다. 다른 도메인이나 서버에 있는 소스들을 iFrame을 불러오고 이에 자바스크립트를 적용하는 과정에는 별도 리서치가 필요합니다.

방법1 : JS 코드

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

이 방법은 같은 서버 내에서 페이지를 로드할 때 유효한 것으로 보입니다.

• 자료출처 : Make iframe automatically adjust height according to the contents without using scrollbar? [duplicate]

방법2 : jQuery 플러그인

이 방법은 추가적/외부의 JS를 로드해야하는 부담이 있습니다. 확인 결과 이 방법 역시 같은 서버에 있는 것이 아니면 작동하지 않는 것으로 확인되었습니다. 다른 서버에도 일정 작업을 진행하면 구현이 되는 것을 확인했습니다. 이는 호스트 서버가 아닌 불러오는 서버에 대한 편집권한이 개발자에게 있을 때 구현이 가능할 것으로 보입니다.

• iFrame Resizer
• iFrame Resizer Docs

참고자료

jquery get height of iframe content when loaded