iframe height change by childe page resize

iframe height change by childe page resize

 

- 부모 페이지에서  IFrame 안의 자식페이지의 내용이 변경되서 높이가 변할때 부모페이지 IFrame 높이변경

- IFrame으로 게시판,후기,댓글 페이지를 넣을 때 사용

 

 

 

1. 부모 페이지 IFrmae 자동 높이 조절, jQuery

 

- 부모페이지, IFrame( 자식 페이지 고정 )

- IE 8.0을 위해 iframe 높이 강제로 지정해야함, 높이가 있어야 IE에서 조정가능해짐

<iframe id="IframeId" class="Iframecls" width="100%" height="100%" scrolling="no" src="페이지소스" frameborder="0" > </iframe> <script type="text/javascript"> $(function () { $('.Iframecls').load(function () { var iframeContentWindow = this.contentWindow; var height = iframeContentWindow.$(document).height(); this.style.height = height + 'px'; }); }); </script>

 

 

 

2. 부모 페이지 IFrame 자동 높이 조절, 자식 페이지의 내용 변경에 따른 높이 변경

 

- 부모페이지, IFrame( 자식 페이지 높이 변동 )

///////////////////////////////////////////////////////////////////////////////////// // 부모 페이지 ///////////////////////////////////////////////////////////////////////////////////// <script language="javascript" type="text/javascript"> <!-- function resizeTopIframe(dynheight) { document.getElementById("IframeId").height = parseInt(dynheight) + 10; } //--> </script> <div id="div_iframe"> <iframe frameborder="0" id="IframeId" width="980px;" height="1000px;" src="자식페이지" scrolling="no"></iframe> </div> ///////////////////////////////////////////////////////////////////////////////////// // 자식 페이지 // 등록 후 리프레시 되면 자식 페이지 크기를 부모페이지에 넣어준다 ///////////////////////////////////////////////////////////////////////////////////// <script language="javascript" type="text/javascript"> <!-- function callResize() { var height = document.body.scrollHeight; parent.resizeTopIframe(height); } window.onload =callResize; //--> </script>

 

 

 

3. 부모 페이지 IFrame 자동 높이 조절, 자식 페이지 자동 높이 조절 및 내용 변경에 따른 높이 변경 , 손자 페이지 내용 변경에 따른 높이 변경

 

- IFrame 안에 또 다른 IFrame

- 부모페이지, IFrame( 자식 페이지 높이변동 , IFrame ( 손자 페이지 높이 변동 ) )

///////////////////////////////////////////////////////////////////////////////////// // 부모 페이지 ///////////////////////////////////////////////////////////////////////////////////// <script language="javascript" type="text/javascript"> <!-- function resizeTopIframe(dynheight) { if (dynheight < IframeId.document.body.scrollHeight+10) dynheight = IframeId.document.body.scrollHeight+10; document.getElementById("IframeId").height = parseInt(dynheight) + 10; } //--> </script> <div id="div_iframe"> <iframe frameborder="0" id="IframeId" width="980px;" height="10px;" src="자식페이지" scrolling="no"></iframe> </div> ///////////////////////////////////////////////////////////////////////////////////// // 자식 페이지 // 등록 후 리프레시 되면 자식 페이지 크기를 부모페이지에 넣어준다 ///////////////////////////////////////////////////////////////////////////////////// <script language="javascript" type="text/javascript"> <!-- // 손자 페이지 IFrame 높이 변경시 확장 function resizeMiddleIframe(dynheight) { // 손자 IFrame 확장 후 document.getElementById("Iframeid_child").height = parseInt(dynheight) + 10; // 부모에게 본인 페이지 높이를 알려줌 var height = document.body.scrollHeight; parent.resizeTopIframe(height); } function callResize() { var height = document.body.scrollHeight; parent.resizeTopIframe(height); } window.onload =callResize; //--> </script> <div id="div_small"> <iframe frameborder="0" id="Iframeid_child" width="785px;" height="1000px;" src="손자페이지" scrolling="no"></iframe> </div> ///////////////////////////////////////////////////////////////////////////////////// // 손자 페이지 // 등록 후 리프레시 되면 손자 페이지 크기를 그 위 부모(자식)페이지에 넣어준다 ///////////////////////////////////////////////////////////////////////////////////// <script language="javascript" type="text/javascript"> <!-- function callResize() { var height = document.body.scrollHeight; parent.resizeMiddleIframe(height); } window.onload = callResize; //--> </script>