wulin.comの記事紹介（www.vevb.com）：誰かがこの問題にまだ遭遇していないかもしれません。まず、適応高さとは何かを説明しましょう。いわゆるIFRAME適応高さは、インターフェイスと相互作用の美しさに基づいて、IFRAMEの境界線とスクロールバーが隠されていることを意味し、IFRAMEであることを確認することができません。 iframeが常に同じ固定高さページを呼び出す場合、iframeの高さを死に至らに記述する必要があります。そして
Googleを介してIFRAMEの適応高さを検索し、5Wを超える結果があり、2W以上の結果でIFRAME高さの適応高さを検索します。私は以前の記事の数十の記事を読み、多数の再版を掘り出しました。オリジナルの3つまたは5つの記事があります。これらのオリジナルの記事では、基本的には静的なものに適応する方法についてのみ語っていますが、JSがDOMを操作した後に動的同期を行う方法を考慮していません。さらに、互換性の観点から、研究も不完全です。
これら2つの側面でいくつかの詳細な研究をしたいと思っています。
たぶん誰かがこの問題にまだ接触していないのかもしれません。最初に適応高さとは何かを説明しましょう。いわゆるIFRAME適応高さは、インターフェイスと相互作用の美しさに基づいて、IFRAMEの境界線とスクロールバーが隠されていることを意味し、IFRAMEであることを確認することができません。 iframeが常に同じ固定高さページを呼び出す場合、iframeの高さを死に至らに記述する必要があります。 IFRAMEがページを切り替えたい場合、または含まれているページがDOMの動的操作を実行する必要がある場合、プログラムはIFRAME高さと含まれるページの実際の高さを同期する必要があります。
ちなみに、iframeを使用する必要がある場合、フロントエンド開発にはあまりにも多くのトラブルが発生します。
約2つの伝統的な慣行があります。
方法1：それぞれの含まれているページが独自のコンテンツを読み込んでロードされた後、JSを実行してこのページの高さを取得し、親ページのiframe高さを同期します。
方法2：メインページのiframeのオンロードイベントでJSを実行し、付属のページの高さコンテンツを取得してから、高さを同期します。
コードメンテナンスの観点から見ると、メソッド2はメソッド1よりも優れています。これは、メソッド1に含まれるページがこれを行うために同じコードの一部を導入する必要があり、多くのコピーが作成されているためです。
どちらの方法でも静かなものを扱うだけです。つまり、コンテンツがロードされたときにのみ実行されます。 JSがDOMによって引き起こされる高さの変化を操作する場合、それはあまり便利ではありません。
メインウィンドウで間隔を実行し、含まれているページの高さを常に取得してから同期する場合、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;
} catch（ex）{}
}
window.setInterval（Reinitiframe（）、200）;
< /script>効率に問題はありますか？
私はテストを行い、5つのウィンドウ（IE6、IE7、FF、オペラ、Safari）を開き、このコードを実行しましたが、CPUに影響はありません。
各ブラウザの互換性の問題について話しましょう。正しい高さに到達する方法。主に2つのボディを比較する価値があります。scrollheightand documentlement.scrollheight。この記事では、このDoctypeを使用していることに注意してください。異なるDoctypesは結果に影響しないはずですが、ページがDoctypeを宣言しない場合は、最初に1つを追加します。
<！doctype html public -// w3c // dtd html 4.01 // en>次のテストコードをメインページに追加して、これら2つの値を出力します。コード例：
<div> <butth> height </button> </div> <script type = text/javascript>を確認します
関数checkheight（）{
var iframe = document.getElementById（frame_content）;
var beight = iframe.contentwindow.document.body.scrollheight;
var dheight = iframe.contentwindow.document.documentelement.scrollheight;
アラート（beight： + beight +、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>
<script type = text/javascript>
関数ToggleOverLay（）{
var overlay = document.getElementById（ 'overlay'）;
overlay.style.display =（overlay.style.display == 'none'）？ 「ブロック」：「なし」;
}
< /script>次のリストには、各ブラウザの上記のコードのテスト値をリストします。
（Bheight = body.scrollheight、dheight = documentlement.scrollheight、red = error値、緑=正しい値）
/レイヤーが拡張されると /レイヤーが隠されます
Beight dheight beight dheight
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
オペラ181 181 300 300
Safari 184 184 303 184
オペラが他のピクセルよりも3ピクセル少ないという問題を無視しましょう。絶対的な位置がない場合、2つの値が等しく、どちらを取るかは問題ではないことがわかります。
しかし、ある場合、各ブラウザのパフォーマンスは異なり、価値を単独で取ることは間違っています。ただし、1つのルールを見つけることができます。つまり、2つの最大値を取得し、各ブラウザと互換性があります。したがって、メインページコードをこれに変換する必要があります。
関数Reinitiframe（）{var iframe = document.getElementById（frame_content）;
試す{
var beight = iframe.contentwindow.document.body.scrollheight;
var dheight = iframe.contentwindow.document.documentelement.scrollheight;
var height = math.max（beight、dheight）;
iframe.height = height;
} catch（ex）{}
}
window.setInterval（Reinitiframe（）、200）;このようにして、互換性の問題は基本的に解決されます。ちなみに、絶対に配置されたレイヤーが値に影響するだけでなく、フロートは2つの値の差も引き起こします。
デモを実証すると、IEを除き、他のブラウザでは、レイヤーが展開されてから隠されている場合、取得された高さの値は、非表示のバック184ではなく、303の拡張された高さに維持されます。この現象は、含まれる異なるページを切り替えるときにも発生する可能性があります。ハイページから低ページに切り替えると、得られた高さは依然として同じ値です。
次のように要約することができます。IFRAMEフォームの高さがドキュメントの実際の高さよりも高い場合、高さはフォームの高さとみなされ、フォームの高さがドキュメントの実際の高さよりも低い場合、ドキュメントの実際の高さはドキュメントの実際の高さとみなされます。したがって、同期する前に、実際のドキュメントよりも高さをより低い値に設定する方法を見つける必要があります。したがって、onload = this.height = 100″をiframeに追加して、ロード時にページが十分に短くなり、同じ高さに同期するようにします。
この値は実際のアプリケーションで決定され、十分に短いですが、短すぎることはありません。そうしないと、FFなどのブラウザーで明らかにちらつきがあります。 DOMが操作されると、メインページを監視できないため、DOMが操作された後に高さを減らすことができます。
私の実際のプロジェクトの1つで、このコードを各DOM関数に挿入する必要があり、実際には層を縮小したり縮小したりしないことはそれほど致命的ではないため、計量コストとメリットに関してこのことをしませんでした。デモを含めて、このことは行われませんでした。読者がより良い方法を持っているなら、私に知らせてください。
これが最終メインページのコードです：
<iframe id = frame_content src = iframe_b.html scrolling = no frameborder = 0> </iframe>
<script type = text/javascript>
関数Reinitiframe（）{
var iframe = document.getElementById（frame_content）;
試す{
var beight = iframe.contentwindow.document.body.scrollheight;
var dheight = iframe.contentwindow.document.documentelement.scrollheight;
var height = math.max（beight、dheight）;
iframe.height = height;
} catch（ex）{}
}
window.setInterval（Reinitiframe（）、200）;
< /script>