오늘도 평화롭게 업무를 하는 중.. 요청이 하나 들어왔다.
💁♀️ : 안녕하세요~ iframe으로 html을 불러오게 했는데 높이를 고정값으로 설정해놨거든요. 근데 매번 설정할 순 없으니.. 컨텐츠에 따라서 자동으로 조절 되게 할 수 있나요~?
🤗 : 네~ 확인해 보겠습니다
어디보자.. 해당 iframe에 height:100%를 넣어도 먹히지 않는 상태군🤔
그럼 스크립트로 처리해야지~!
📌 iframe 높이 자동 조절하기
<iframe src="contentPage.html" id="myiframe"></iframe>
<script type="text/javascript">
let iframe = document.getElementById('myiframe');
iframe.addEventListener('load', function){
iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
});
</script>❗iframe 요소에 접근하기❗
contentDocument : iframe 요소 내에 포함된 문서를 가리키는 JavaScript 객체
iframe이 로드된 후 contentDocument.body.scrollHeight 를 이용해서 전체 높이를 가져온다! 이렇게 하면 간단히 해결!
..된 줄 알았는데 테스트를 해보니까 안된다..? 😳
📌 크로스 도메인일 경우
왜 안되지..? 왜..? 한참을 헤매다 알아낸 사실..😵
iframe으로 불러오는 페이지와 스크립트가 있는 페이지가 서로 도메인이 달라서 적용이 안 되었던 것!
스크립트는 일반적으로 자신이 포함된 문서와 출처가 동일한 문서나 창의 프로퍼티만 읽을 수 있다.
프로토콜, 도메인, 포트 중 어느 하나라도 다른 경우엔 다른 윈도우와 통신할 수 없다.
출처 : https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
즉 크로스 도메인일 경우엔 postMessage() 메소드를 이용해서 통신해야 한다! 😮
우선 iframe으로 넣을 컨텐츠 페이지에 해당 코드를 작성한다 ⤵
window.addEventListener('load', function() {
let message = {height: document.body.scrollHeight};
window.top.postMessage(message, "*");
});변수에 높이값을 저장해두고 postMessage로 상위 페이지에 전달!
이제 상위 페이지에 해당 코드를 작성! ⤵
<iframe src="contentPage.html" id="myiframe"></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>메시지를 받을 때는 윈도우의 'message' 이벤트에 대한 핸들러를 등록하면 된다.
data 는 전달받은 데이터를 뜻한다.
이렇게 하면 컨텐츠의 높이값을 상위 페이지로 가져와서 iframe의 높이값을 설정할 수 있다!
테스트 해보니 결과도 아주 잘 나왔다😎
해결 완~!
+) 해당 코드는 반응형으론 되지 않았는데 load 를 resize 로 바꾸면 될 거 같다!😏 해보진않음
📄 참고자료
