iframeページのサイズを動的に調整する
今日、親ページにiframeがロードされたページのサイズに応じて自動的にページサイズを動的に調整できるという問題が発生しました.解決策をここに記録します.
親ページmain.html内jsコード:
親ページmain.html内のiframe:
ページsub.html内でjsコードを動的に調整するロード:
上記のコードに示すように、動的調整関数は主に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つのブラウザタイプ判断コードを参照してください.
親ページ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つのブラウザタイプ判断コードを参照してください.