マルチブラウザ iframe アダプティブハイト (ie8、Google Chrome 4.0、firefox3.5.3) と互換性あり_javascript スキル

小規模プロジェクトである Longli Middle School マルチメディア教室管理システムでは、バックエンド管理で iframe を使用しています。コンテンツを動的にロードする必要があるため、iframe をコンテンツ ページの高さに適応させる必要があります。Google を使用して多くの回答を見つけましたが、成功したものは次のとおりです。このコード

コードをコピー コードは次のとおりです:

iframe コード:

コードをコピー コードは次のとおりです:

>

IE8 では高さ調整の実装は成功しましたが、Google Chrome では高さは増加するだけで減少しません。つまり、身長が伸びた後に縮小することはありません。
次に、各ブラウザーのパフォーマンスです。は同じではなく、単一の値が正しいということはありません。しかし、最大 2 つの値を取ることで、さまざまなブラウザと互換性を持たせることができるという規則が見つかります。したがって、メイン ページのコードは次のように変換されます:

コードをコピー コードは次のとおりです: function reinitIframe(){var iframe = document.getElementById("frame_content");

try{

var bHeight = iframe.contentWindow.document.body.scrollHeight; document .documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
}catch (ex){}
}
window.setInterval ( "reinitIframe()", 200);


このようにして、互換性の問題は基本的に解決されます。ちなみに、絶対位置のレイヤーだけが値に影響するわけではなく、float も 2 つの値の差を生じさせます。
デモを表示すると、IE 以外の他のブラウザでは、レイヤーを展開してから非表示にした場合、取得された高さの値は、実際の値 184 ではなく、展開された高さの 303 に維持されていることがわかります。隠された、つまり、身長が伸びた後は縮むことはできない、と彼は言いました。この現象は、含まれる異なるページ間を切り替えるときにも発生します。長いページから短いページに切り替えたときに、取得される高さは高い値のままになります。
これをまとめると、iframe フォームの高さが実際のドキュメントの高さより高い場合はその高さがフォームの高さとして扱われ、フォームの高さが実際のドキュメントの高さより低い場合はその高さがフォームの高さとして扱われます。ドキュメントの高さ、iframe の高さはドキュメントの実際の高さとして取得されます。したがって、高さを同期する前に、高さを実際のドキュメントよりも低い値に設定する方法を見つけてください。したがって、onload="this.height=100" を iframe に追加すると、ページが読み込まれるときに、まず十分に短い高さに短縮され、次に同じ高さに同期されます。
この値は実際のアプリケーションで決定されますが、十分に短い必要がありますが、短すぎないように注意してください。そうでないと、FF などのブラウザーで明らかなちらつきが発生します。メイン ページは DOM 操作を監視できず、DOM 操作が完了した後にのみ高さを減らすことができます。

実際のプロジェクトの 1 つでは、このコードをすべての DOM 関数に挿入する必要があったため、コストと利点のトレードオフを考慮してこれを実行しませんでしたが、それほど致命的ではありませんでした。デモでもこれは行われませんでした。読者の皆様がより良い方法をご存知の場合は、ぜひお知らせください。
/************************************元の引用終わり****** *** ********************** /
これを読んで、iframe.height を割り当てることができるかどうかを確認してください。 iframe.height="10px" などの十分に小さい初期値を最初に指定し、その後 iframe.height に変更すると、元のテキストの赤い部分の問題が解決されます。
最終的なコードは次のとおりです:




コードをコピーします

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

iframe コードはまだt 変更します:

コードをコピー コードは次のとおりです:

テスト後、iframe は IE8、Google Chrome 4.0、Firefox3.5.3 で高さに正常に適応しました。