[JS] iframe 불러올 때 자동 높이 맞추기

 

안녕하세요 무택입니다 :)

오늘은 오랜만에 JS 기능을 들고 왔습니다😀

오늘의 주제 "" iframe 불러올 때 자동 높이 맞추기 "" 입니다.

 

iframe을 불러올 때 높이가 고정값이면 좋지만

그렇지 않은 경우도 있어요.

모바일에 iframe이 들어간다던가, 반응형 사이트라던가..

그런 경우에 반드시 필요한 기능이죠.

아래에서 코드 바로 확인해 보시죠😎

 

 

HTML/JS

<iframe id="myframe" src="불러올 문서" width="100%" scrolling="no" frameborder="0" onload="height_cal()"></iframe>

<script type="text/javascript">
    function height_cal() {
        var ifrm_height = document.getElementById('myframe').contentWindow.document.body.scrollHeight;
        document.getElementById('myframe').height = ifrm_height;
    }
</script>

 

 

코드 설명

코드 원리

1. 불러올 `iframe`의 높이를 측정
2. `iframe`을 불러올 때, 높이를 위에서 측정한 값으로 부여
3. `<iframe onload="">`를 사용해 불러올 때 위 기능 실행

 

상세 설명

<iframe id="myframe" src="불러올 문서" width="100%" scrolling="no" frameborder="0" onload="height_cal()"></iframe>

 

아이프레임을 작성할 때 중요한 점은 id 부여, scrolling 설정, 스크립트 실행입니다.

 

 

function height_cal() {
    var ifrm_height = document.getElementById('myframe').contentWindow.document.body.scrollHeight;
    document.getElementById('myframe').height = ifrm_height;
}

여기서 주목할 프로퍼티는 `contentWindow`입니다.

그냥 문서 내부의 요소를 지정할 때는 사용할 필요가 없지만

`iframe` 내부에 접근하기 위해서는 `contentWindow`프로퍼티를 사용해야 합니다.

 

여기서 해석은 `myframe`이란 `id`를 가진 요소 내부의 높이를 측정

그리고 불러올 `myframe`의 높이에 그 높이 값을 넣어준다. 입니다.

 

---

같이 보면 좋은 글

[JavaScript]스크롤 높이 개념 사진 한장으로 이해하기

[JavaScript]스크롤 높이 개념 사진 한장으로 이해하기