iframe 높이 자동 조절 (고정 case / 유동 case)

iframe 높이 조절을 하는 이유

자식 페이지를 부모 페이지로 불러올때

자식 페이지 그대로의 모습을 부모 페이지로 불러오고 싶다면 아이프레임은 가로값과 높이값을 주어야만 한다.

가로값과 높이값이 없으면 아이프레임이 임의의 사이즈로 생성이 되고

아이프레임에 불러와 지는 자식 페이지의 크기가 아이프레임 크기보다 클 경우 좌우 스크롤이 생기기 때문이다.

 

가로는 width: 100%로 해결

세로는 스크립트를 사용해야 한다. (height: 100% X)

 

잠깐 용어 정리!
# 부모 페이지 : iframe이 있는 페이지. 즉, <iframe></iframe> 존재하는 페이지
# 자식 페이지 : iframe으로 불러지는 페이지. 즉, 부모에 <iframe src="자식페이지">로 로드되는 페이지

 

 

 

 

그럼 이제 1. 고정적인 높이(자식 높이 항상 일정)를 불러오는 방법과

2. 유동적인 높이(자식 높이가 내부 동작에 따라 유동적으로 변화)를 불러오는 방법을 알아보자! 

 

 

 

 

[CASE 1] 부모가 자식에게서 고정적인 높이를 불러오는 방법

 

• 부모 페이지

<iframe src="자식페이지 주소" id="ifr" name="" title="" frameborder="0" scrolling="no" style="width:100%; overflow:auto; overflow-x:hidden;"></iframe>

<script type="text/javascript">
    window.onload = function() {
      window.addEventListener("message", function(e) {
      // message를 통해 자식페이지와 통신
        document.getElementById("ifr").height = e.data.scrollHeight;
        // 높이값을 구함
      });
    };
</script>

 

• 자식 페이지

<script>
    window.onload = function() {
      var loadHeight = document.getElementById('body의 id값').scrollHeight;
      // 고정된 자식페이지의 전체 높이값을 구함
      window.parent.postMessage({'scrollHeight': loadHeight }, '*');
      // postMessage를 통해 부모 페이지에게 전달
      console.log(loadHeight);
    };
</script>

참고 postMessage

 

 

 

[CASE 2] 부모가 자식에게서 유동적인 높이를 불러오는 방법

: 자식 페이지 내부에서 버튼을 클릭하면 내용물이 길게 펼쳐졌다 닫히는 동작이나, 아코디언같은 동작이 있어 자식 페이지의 높이가 유동적으로 변화하는 경우 부모 페이지에서도 유동적으로 반영되게 하는 방법

 

 

• 부모 페이지 : CASE 1과 동일

<iframe src="자식페이지 주소" id="ifr" name="" title="" frameborder="0" scrolling="no" style="width:100%; overflow:auto; overflow-x:hidden;"></iframe>

<script type="text/javascript">
    window.onload = function() {
      window.addEventListener("message", function(e) {
      // message를 통해 자식페이지와 통신
        document.getElementById("ifr").height = e.data.scrollHeight;
        // 높이값을 구함
      });
    };
</script>

 

• 자식 페이지 : CASE 2와 동일하되 이벤트가 발생하는 부분에 setTimeout을 넣어준다

<script>
    // [start] CASE 2와 동일
    window.onload = function() {
      var loadHeight = document.getElementById('body의 id값').scrollHeight;
      window.parent.postMessage({'scrollHeight': loadHeight }, '*');
      console.log(loadHeight);
    };
    // [end] CASE 2와 동일


    expandBtn.addEventListener('click', function() {
      // [start] 클릭할 경우에 유동적인 높이를 계산하고 부모에 전달할 수 있게 넣어주는 부분
      setTimeout(function() {
        var changeHeight = document.body.scrollHeight;
        // 변화되는 높이값 구함
        window.parent.postMessage({'scrollHeight': changeHeight }, '*');
        // 고정높이 구할때처럼 부모 페이지에 postMessage로 높이값 전달
        console.log(changeHeight);
      }, 200);
      // [end] 클릭할 경우에 유동적인 높이를 계산하고 부모에 전달할 수 있게 넣어주는 부분
    });
</script>

 

이렇게 하면 완벽하게 해결!

 

 

 

 

 

추가나 수정이 필요한 내용이 있다면 그냥 지나치지 마시고 비공개 댓글 남겨주시면 감사하겠습니다 ^^