Web デザインスキル: iframe の適応高さの問題

おそらく、この問題にまだ遭遇していない人もいるでしょうから、まずは適応高さとは何かを説明しましょう。いわゆる iframe の適応高さとは、インターフェースの美しさとインタラクティブ性を考慮して、iframe の境界線とスクロールバーを非表示にし、iframe であることがわからないようにすることを意味します。 iframe が常に同じ固定の高さのページを呼び出す場合は、iframe の高さをハードコードするだけで済みます。 iframe でページを切り替える必要がある場合、またはインクルードされたページで動的な DOM 操作を実行する必要がある場合、プログラムは iframe の高さをインクルードされたページの実際の高さと同期する必要があります。
ちなみに、iframe はフロントエンドの開発に多大な問題をもたらすため、絶対に必要な場合にのみ使用してください。
従来のアプローチには 2 つあります。
方法 1: 含まれる各ページが独自のコンテンツの読み込みを完了した後、JS を実行してこのページの高さを取得し、親ページの iframe の高さを同期します。
方法 2: メインページの iframe の onload イベントで JS を実行して、インクルードページの高さコンテンツを取得し、高さを同期します。
コードのメンテナンスの観点からは、方法 2 の方が方法 1 よりも優れています。方法 1 では、これを実行するために、インクルードされた各ページで同じコードを導入する必要があり、多くのコピーが作成されるためです。
どちらの方法も静的なもののみを扱います。つまり、コンテンツがロードされたときにのみ実行されます。DOM によって生じる高さの変更を JS で操作するのはあまり便利ではありません。
メインウィンドウに Interval を作って、インクルードされたページの高さを常に取得して同期させれば、便利だし、JS が DOM を操作する問題も解決するのではないでしょうか。答えはイエスです。
デモページ: メインページ iframe_a.html、含まれるページ iframe_b.htm および iframe_c.html
メインページのコード例:

コードをコピー

コードは次のとおりです。

＜iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"＞＜/iframe＞＜script type="text/javascript"＞
関数reinitIframe(){
var iframe = document.getElementById("frame_content");
試す{
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
}キャッチ（例）{}
}
ウィンドウの間隔を 200 に設定します。
＜ /script＞

実行し続けると効率に問題が出るでしょうか？
テストとして、5 つのウィンドウ (IE6、IE7、FF、Opera、Safari) を同時に開いてこのコードを実行しました。CPU への影響はなく、2ms に調整しても影響はありませんでした (基本的に 0% の占有率を維持)。
次に、主に body.scrollHeight と documentElement.scrollHeight を比較しながら、さまざまなブラウザの互換性の問題と正しい高さを取得する方法について説明します。この記事ではこの doctype を使用していることに注意してください。異なる doctype が結果に影響を与えることはありませんが、ページで doctype を宣言していない場合は、最初に doctype を追加する必要があります。

コードをコピー

コードは次のとおりです。

＜ !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a>"＞これらの 2 つの値を出力するために、次のテストコードをメインページに追加します。コード例:
＜div＞＜button＞高さを確認＜/button＞＜/div＞＜script type="text/javascript"＞
関数 checkHeight() {
var iframe = document.getElementById("frame_content");
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
アラート("bHeight:" + bHeight + ", dHeight:" + dHeight);
}
＜ /script＞ページが読み込まれたときに、絶対位置のレイヤーを切り替えることで、ページの高さを動的に変更することができます。レイヤーを展開すると、ページの高さが増加します。コード例:
＜div＞＜button＞オーバーレイの切り替え＜/button＞
＜ /div＞
＜div style="height:160px;position:relative"＞
＜div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"＞＜/div＞
＜ /div＞
＜スクリプトタイプ="text/javascript"＞
関数toggleOverlay() {
var オーバーレイ = document.getElementById('オーバーレイ');
overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';
}
＜ /script＞

以下に、さまざまなブラウザでの上記コードのテスト値を示します。

コードをコピー

コードは次のとおりです。

(bHeight = body.scrollHeight、dHeight = documentElement.scrollHeight、赤 = 間違った値、緑 = 正しい値)
/ レイヤーが非表示の場合レイヤーが展開されている場合
b高さ d高さ b高さ d高さ
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
オペラ 181 181 300 300
サファリ 184 184 303 184

Opera が他のものより 3 ピクセル少ないという事実を今のところ無視すると、何も絶対的に配置されていない場合、2 つの値は等しく、どちらを選択しても問題ないことがわかります。
しかし、ある場合、ブラウザごとに動作が異なり、正しい値は 1 つもありません。しかし、2 つの値の最大値を取るとすべてのブラウザと互換性があるというルールを見つけることができます。したがって、メインページのコードを次のように変換する必要があります。

コードをコピー

コードは次のとおりです。

関数 reinitIframe(){var iframe = document.getElementById("frame_content");
試す{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var 高さ = Math.max(bHeight, dHeight);
iframe.height = 高さ;
}キャッチ（例）{}
}
ウィンドウの間隔を 200 に設定します。

このようにして、互換性の問題は基本的に解決されます。ちなみに、絶対配置されたレイヤーが値に影響を与えるだけでなく、float によって 2 つの値に差が生じます。
デモを試してみると、IE 以外のブラウザでは、レイヤーを展開してから非表示にすると、取得される高さの値は、非表示のときの実際の値 184 ではなく、展開された高さ 303 のままであることがわかります。つまり、高さが伸びた後は、元に戻すことはできません。この現象は、異なるページ間を切り替えるときにも発生します。背の高いページから低いページに切り替えると、取得される高さは依然として背の高い値になります。
まとめると、iframe ウィンドウの高さが実際のドキュメントの高さよりも高い場合は、ウィンドウの高さから高さが取得され、ウィンドウの高さが実際のドキュメントの高さよりも低い場合は、実際のドキュメントの高さから高さが取得されます。したがって、高さを同期する前に、高さを実際のドキュメントよりも低い値に設定する方法を見つけてください。したがって、ページが読み込まれたときに十分に低い高さに縮小され、同じ高さに同期されるように、iframe に onload="this.height=100" を追加します。
この値は実際のアプリケーションで決定されます。十分に短い必要がありますが、短すぎてもいけません。そうでないと、FF などのブラウザーで明らかなちらつきが発生します。メインページは DOM 操作を監視できないため、高さを縮小できるのは DOM 操作が完了した後のみです。
実際のプロジェクトの 1 つでは、コストとメリットを比較検討した結果、各 DOM 関数にこのコードを挿入するにはコストが高すぎるため、これを実行しませんでした。実際、レイヤーが縮小しても縮小しなくても、それほど致命的ではありませんでした。これはデモでは行われませんでした。読者の皆さんの中に、もっと良いアプローチがある方がいらっしゃいましたら、ぜひ教えてください。
これが最終的なメインページコードです。
[/コード]
＜iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"＞＜/iframe＞
＜スクリプトタイプ="text/javascript"＞
関数reinitIframe(){
var iframe = document.getElementById("frame_content");
試す{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var 高さ = Math.max(bHeight, dHeight);
iframe.height = 高さ;
}キャッチ（例）{}
}
ウィンドウの間隔を 200 に設定します。
＜ /script＞
[/コード]

<<: HTML のテキストエリアタグ

>>: Mac+IDEA+Tomcat の設定手順