なぜ3回の会談なのか
なぜ3回も話しますか？ 1 つは、これがあまりにもひどい話題であるためであり、もう 1 つは、Master Tai がiframe適応高さについて語るためにn 年前にこの記事を書いたからです。この質問をもう一度提起する理由は、以前のプロジェクトでこの問題のあらゆる側面に実際に遭遇しており、それを要約する必要があるからです。お役に立てば幸いです。間違いがあれば修正してください。
同じドメインとサブページの高さは動的に増加しません。
この状況は最も単純です。スクリプトを通じてサブページの実際の高さを直接取得し、iframe 要素の高さを変更するだけです。ただし、注意しなければならない点が 2 つあります。
ページ内に絶対配置要素がある場合、またはフローティング要素がない場合、状況は少し複雑になります。Webkit カーネルを備えたブラウザであっても、ブラウザごとに処理結果が異なります。詳細については、このデモを参照してください。したがって、ブラウザ検出を行うか、Math.max を使用して最大値を計算するか、別のことを考えることになります。
iframe に含まれるページは非常に大きく、読み込みに長い時間がかかる可能性があります。高さを直接計算すると、ページがダウンロードされていない可能性があり、高さの計算で問題が発生します。したがって、iframe の onload イベントで高さを計算する方が良いでしょう。ここで、IE で onload イベントをバインドするには、Microsoft イベント モデル obj.attachEvent を使用する必要があることにも注意してください。他のブラウザでも obj.onload = function(){} を直接使用できます。
（関数（）{
var _reSetIframe = function(){
var Frame = document.getElementById("frame_content_parent")
試す {
var フレームコンテンツ = フレーム.コンテンツウィンドウ.ドキュメント,
bodyHeight = Math.max
(frameContent.body.scrollHeight,
FrameContent.documentElement.scrollHeight);
if (bodyHeight != フレーム.高さ){
フレームの高さ = 体の高さ;
}
}
キャッチ(例) {
フレーム.高さ = 1800;
}
}
if(frame.addEventListener){
フレーム.addEventListener
("load",function(){setInterval(_reSetIframe,200);},false);
}それ以外{
Frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
同じドメイン内では、サブページの高さが動的に増加し、スクリプトが完全に失敗する可能性があります。
2 番目の例では、スクリプト エラーが考慮されていますが、スクリプトがまったく実行されない場合、iframe の高さが十分に高くないため、iframe 内のコンテンツは表示されません。このため、フロントエンド制御の都合上、事前に十分な高さを設定しておくことが多く、修正が必要な場合にはCSSを変更するだけでよいと思います。ここでは selector{ height:1800px } を設定します。スタイル シートに記述されたスタイルは、node.style[property] を使用して直接取得できないことに注意してください。Microsoft モデルの場合、node.currentStyle[property] を使用する必要があります (余談: 悲劇的な IE モデルは CSS 擬似をサポートしていません)。 class )、W3C モデルの場合は、 window.getComputedStyle(node,null)[property] を使用して取得します。便宜上、YUIを直接使用しました。
ここには、iframe の高さをそれに含まれるページの高さより大きく設定する場合、ブラウザごとに異なる方法で処理されます。たとえば、Firefox では、body 要素の高さを計算する必要があり、html 要素の高さは iframe の高さと同じになります。ただし、ページに絶対位置があり、クリアされていないフローティング要素がある場合は、計算できません。明らかに、最初の方法の方が欠点は小さくなります。詳細については、このデモを参照してください。