iframeページのサイズを動的に調整する


今日、親ページにiframeがロードされたページのサイズに応じて自動的にページサイズを動的に調整できるという問題が発生しました.解決策をここに記録します.
 
親ページmain.html内jsコード:
 /*    iframe   */
    function changeIframeSize(iframeContentHeight){
       document.getElementById('rightContent').height = iframeContentHeight+20;
    }
    /*iframe        */
    function iframeOnload()
    {
        var frms=document.getElementById('rightContent');
        /*       */
         var height=($.browser.msie||$.browser.opera)? frms.document.body.scrollHeight:frms.contentDocument.body.offsetHeight;
         changeIframeSize(height);
         /*this.height=rightContent.document.body.scrollHeight*/
    }

親ページmain.html内のiframe:
 <div id="right" >
     <iframe width="100%" frameBorder="0" frameSpacing="0" scrolling="auto" marginHeight="0" marginWidth="0" name="rightContent" src="articlesList.jsp?categoryId=-1" id="rightContent" onload="iframeOnload()" ></iframe>
     </div>

ページsub.html内でjsコードを動的に調整するロード:
	  var height=($.browser.msie||$.browser.opera)? document.body.scrollHeight:document.body.offsetHeight;/*       */
	  parent.changeIframeSize(height);/*       js  ,  iframe   */

 
上記のコードに示すように、動的調整関数は主に2つあります.
1.iframeOnloadは、主にロードページがロードされたばかりのときにiframeのonloadイベントに応答するために使用されます.
 
2.changeIframeSize iframeのサイズを実際に調整するために使用します.iframeのonloadのイベントは、ページが最初にロードされたときにのみトリガーされますが、ページがロードされた後も、iframeがロードされたページのサイズに応じて動的に調整できるようにするには、ロードページで親ページ内のchangeIframeSize関数を手動で呼び出します.
 
上記のコードで注意すべき点は次のとおりです.
1.$.browser.msie||$.browser.operaは、ブラウザのタイプを判断するために使用されます.これは、主に異なるブラウザがページの実際のサイズを理解していないためです.ここではjQueryを利用してブラウザのタイプを判断するので、jQueryをロードする必要があります.jsファイル;
2.注意iframe内のロードページがIE中で親ページでもロードページでもdocumentを呼び出すことを示す.firefoxでは異なり、父親ではcontentDocumentを呼び出し、ロードページではdocumentを使用します.具体的には、上記の2つのブラウザタイプ判断コードを参照してください.