ホームページ >
記事 > ウェブフロントエンド > IFrame の高さを動的に変更して、height_javascript スキルに適応するように IFrame を自動的に拡張します。
IFrame の高さを動的に変更して、height_javascript スキルに適応するように IFrame を自動的に拡張します。
- WBOYオリジナル
- 2016-05-16 17:44:53983ブラウズ
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> } <br></script>
2. IFrame の詳細 ページの本文 (つまりサブページ) に、onload イベント
🎜>
3. 親ページの IFrame タグに ID を追加します。これは、上記の最初の手順のメソッド本体の 2 行目に記述されています。 >
コードをコピー
コードは次のとおりです: src="frame1.jsp" FrameBorder=0
noResizescrolling="no" width=100% height=100% vspale="0" id="childFrame">< ;/IFRAME> >
具体的な実装 2
:
コードをコピー 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 は
コードをコピーします
コードは次のように:
声明:この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。