ブラウザー全体にコンテンツが収まるように iFrame の高さのサイズを動的に変更するにはどうすればよいですか?

コンテンツに合わせて iFrame の高さを動的に変更する

iFrame 内に aspx ページを埋め込む場合、iFrame の高さがコンテンツに適切に対応できず、望ましくないスクロール バーが表示される場合があります。この問題に対処するために、クロスブラウザのソリューションを検討してみましょう。

クロスブラウザの課題を理解する

提供されている jQuery アプローチは、Chrome では iFrame の高さを正常に調整しますが、Firefox では問題が発生します。この不一致は、ブラウザーごとにクロスサイト スクリプティング (XSS) 制限を処理する方法が異なることから発生します。

最適な解決策

iFrame のコンテンツの高さを決定するには、contentWindow.document を利用します。 body.scrollHeight. iFrame が読み込まれたら、次の JavaScript を使用して動的にサイズを変更します。

function iframeLoaded() {
    var iFrameID = document.getElementById('idIframe');
    if(iFrameID) {
          iFrameID.height = "";
          iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
    }   
}

実装

iFrame を埋め込んだページ内にこの JavaScript を組み込み、イベント ハンドラーをフックします。 iFrame タグの onLoad 属性:

<iframe>

拡張使用ケース

iFrame 内のコンテンツ更新にリサイザーの手動トリガーが必要なシナリオでは、iFrame のコンテンツ スクリプトから iframeLoaded() を呼び出すことができます。

parent.iframeLoaded();

この包括的なソリューションは、クロスブラウザーを提供します。コンテンツに基づいて iFrame の高さを動的に変更し、不要なスクロール バーを排除するための互換性。

以上がブラウザー全体にコンテンツが収まるように iFrame の高さのサイズを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。