IFrame の高さを動的に変更して、IFrame の自動拡張と親ページの自動縮小を実現します
原則: IFrame サブページが読み込まれるときに、親 IFrame オブジェクトを呼び出して高さを変更します
特定の実装 1:
1. IFrame の特定のページ (つまり、サブページ) に、JavaScript
<script> <br>function IFrameResize(){ <br>//alert(this.document.body. scrollHeight); //現在のページの高さをポップアップします<br>var obj =parent.document.getElementById("childFrame") //親ページの IFrame オブジェクトを取得します<br>//alert(obj.height) ); //親ページの IFrame に設定されている高さをポップアップします<br>obj.height = this. document.body.scrollHeight; //親ページの IFrame の高さをページの高さに調整します。 🎜>} <br></script>
2. IFrame の特定のページ (つまりサブページ) に、onload イベント
< body onload="IFrameResize()"> >3. 親ページの IFrame タグに ID を追加します。これは、上記の最初の手順でメソッド本体の 2 行目に記述された childFrame
です。 code
src="frame1 .jsp" FrameBorder=0
noResizescrolling="no" width=100% height=100% vspale="0" id="childFrame">
具体的な実装 2:
コードをコピー
コードは次のとおりです: //親 iframe の高さを動的に変更します//iframe ページによって呼び出される JS
$(function(){
//ウィンドウの高さを取得します
var winH = $(window ).height();
//ページの高さを取得します
var bodyH = $(document).height();
if(bodyH > winH){
window.parent. document.getElementById("mainFrame").height=bodyH;
}else{
window.parent.document.getElementById("mainFrame").height=winH;
}
}); 🎜>
親ページの iframe は
コードをコピーします