[Javascript] 아이프레임(iframe) 높이 자동 조절 하기(feat. 크로스 도메인)

seoyeon·2023년 4월 13일
4

오늘도 평화롭게 업무를 하는 중.. 요청이 하나 들어왔다.

💁‍♀️ : 안녕하세요~ 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의 높이값을 설정할 수 있다!

테스트 해보니 결과도 아주 잘 나왔다😎
해결 완~!

+) 해당 코드는 반응형으론 되지 않았는데 loadresize 로 바꾸면 될 거 같다!😏 해보진않음


📄 참고자료

javascript iframe 컨텐츠에 맞게 높이 자동 조절 - 개발 메모장

0개의 댓글