コンテンツに合わせて iFrame のサイズを自動変更するにはどうすればよいですか?

コンテンツに合わせて iFrame のサイズを自動変更する

Web ページの柔軟性を強化し、コンテンツに合わせて iframe のサイズを調整することで、シームレスな Web ページを実現します。ユーザーエクスペリエンス。この課題に対する解決策を探ってみましょう。

重要なのは、埋め込まれたドキュメントのサイズの変化を捉えることにあります。 JavaScript のイベント駆動型の性質により、イベント リスナーをドキュメントに適用し、これらの変更に動的に応答できます。具体的には、ドキュメントのコンテンツが完全に読み込まれたときにトリガーされる DOMContentLoaded イベントに興味があります。

次に、JavaScript コードを見てみましょう。

function resizeIFrameToFitContent(iFrame) {
    iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

この関数は iframe を受け取ります。を引数として使用し、埋め込まれたドキュメント本文のスクロールの幅と高さに一致するように幅と高さを更新します。

これを開始するにはこのプロセスでは、DOMContentLoaded イベントにイベント リスナーを追加します。

window.addEventListener('DOMContentLoaded', function(e) {
    var iFrame = document.getElementById('iFrame1');
    resizeIFrameToFitContent(iFrame);
});

識別子「iFrame1」をカスタマイズして、調整したい特定の iframe をターゲットにすることができます。あるいは、ページ上のすべての iframe のサイズを変更するには、ループを使用して反復処理します。

var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
    resizeIFrameToFitContent( iframes[i] );
}

この強化されたコードにより、ページ上の個々の iframe とすべての iframe の自動サイズ変更が可能になり、その寸法が常に一致するようになります。コンテンツ。

以上がコンテンツに合わせて iFrame のサイズを自動変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。