etc

Iframe 높이 조절

퓨어프 2023. 11. 23. 11:34
반응형

아이프레임은 기본적으로 로드를 호스트하는 페이지에 정적인 높이값을 지니게 됩니다. 로드되는 페이지의 높이에 맞춰 값을 조정하기 위해서는 별도의 자바스크립트 코드가 필요합니다.

 

플러그인 스크롤바 관련
https://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

 

Same-Domain Iframes

동일한 도메인 iframe의 경우 상위 페이지에서만 코드 변경이 필요합니다. iframe 페이지에는 코드 변경이 필요하지 않습니다.

  • iframe이 로드된 후 contentDocument.body.scrollHeight 속성은 전체 높이를 가져 옵니다.
  • contentDocument.body.scrollWidth 속성은 전체 넓이를 가져 옵니다.
<iframe src="child.html" id="child-iframe"></iframe>

<script>
  let iframe = document.querySelector("#child-iframe");

  iframe.addEventListener('load', function() {
    iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
    iframe.style.width = iframe.contentDocument.body.scrollWidth + 'px';
  });	
</script>

 

Cross-Domain Iframes

크로스 도메인 iframe의 경우 iframe과 상위 페이지 모두 코드를 수정 해야합니다.

 iframe이 로드된 후 사이즈는 postMessage()를 사용하여 상위 페이지로 전달됩니다 .

window.addEventListener('load', function() {
  let message = { height: document.body.scrollHeight, width: document.body.scrollWidth };	

  window.top.postMessage(message, "*");
});

상위 페이지에서 메시지가 수신되고 iframe 사이즈가 업데이트 됩니다.

<iframe src="https://cross-domain.com/child.html" id="child-iframe"></iframe>

<script>
  let iframe = document.querySelector("#child-iframe");

  window.addEventListener('message', function(e) {
    let message = e.data;

    iframe.style.height = message.height + 'px';
    iframe.style.width = message.width + 'px';
  } , false);
</script>

 

jQuery iFrame Resizer 플러그인

출처: https://hohoya33.tistory.com/128 [개발 메모장:티스토리]

게시판을 IFRAME으로 페이지에 삽입할 경우 IFRAME 내부의 내용이 설정한 높이(height)

보다 크게되면 스크롤바가 생기게 됩니다.
그러면 보기에도 별로 안좋고 사용하기도 불편하게 되죠..

그럴때 내용의 크기에 따라서 IFRAME의 크기를 변경해 주면 스크롤바를 안보이게 할 수 있습니다.
내 보드를 IFRAME으로 페이지에 삽입할 경우 사용하시면 스크롤바 없이 깔끔하게 처리하실 수 있습니다.

일단 아래의 자바스크립트 코드를 페이지에 포함 시킵니다.


function ResizeFrame(name)

{

  // IFRAME 내부의 body 개체

  var fBody  = document.frames(name).document.body;

  // IFRAME 개체

  var fName  = document.all(name);


  // IFRAME 내부의 body개체의 넓이를 계산하여 IFRAME의 넓이를 설정해 준다.

  fName.style.width 

    = fBody.scrollWidth + (fBody.offsetWidth - fBody.clientWidth);

  // IFRAME 내부의 body개체의 높이를 계산하여 IFRAME의 높이를 설정해 준다.

  fName.style.height 

    = fBody.scrollHeight + (fBody.offsetHeight - fBody.clientHeight);


  // 만약 IFRAME의 크기 설정에 실패 하였다면 기본크기로 설정한다.

  if (Frame_name.style.height == "0px" || Frame_name.style.width == "0px")

  {

    fName.style.width = "700px";     //기본 iframe 너비

    fName.style.height = "300px";    //기본 iframe 높이

  }

}

위 자바스크립트를 페이지에 포함시키셨다면 이제 IFRAME 내부의 페이지가 로드 될때마나 크기를 다시 설정 하도록 onload 이번트에서 자바스크립트 함수를 호출해 줍니다.



<iframe name="NeBoard" src="/neboard/board.aspx?bno=005001&mode=LIST&goto=1"

    scrolling="No" onLoad="ResizeFrame('NeBoard');" ></iframe>
이렇게 하시면 IFRAME내부의 페이지가 로드될때 마다 크기를 계산해서 IFRAME의 크기를
알맞게 다시 설정해 주기때문에 스크롤바가 표시 않되도록 할 수 있습니다.

그럼 유용하게 사용하시고, 혹시 질문사항 있으시면 질문 답변 게시판으로 올려주세요~



((다른 방법))

<iframe id="ifrm" width="100%" height="100%" frameborder="no" scrolling="no" src="iframe.html" marginwidth="0" marginheight="0" onload="resizeIframe(this)"></iframe>
<SCRIPT LANGUAGE="JavaScript">
<!--
function resizeIframe(fr) {
fr.setExpression('height',ifrm.document.body.scrollHeight);
fr.setExpression('width',ifrm.document.body.scrollWidth);
}
//-->
</SCRIPT>


출처 : niccol21님의 블로그 http://blog.naver.com/niccol21?Redirect=Log&logNo=20032474718
반응형