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

コンテンツに合わせて iframe のサイズを自動調整する

問題:

iframe の幅と高さを自動的に調整するにはどうすればよいですか含まれているコンテンツを正確に適合させるには?この調整は、iframe のロード後に可能になるはずです。

解決策:

これを実現するには、ボディの寸法の変更を処理するイベント アクションが必要です。 iframe。解決策は次のとおりです:

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

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

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

上記のコード内:

• resizeIFrameToFitContent() 関数は、iframe のスクロール幅と高さに基づいて iframe の幅と高さの属性を設定します。
• DOMContentLoaded イベント リスナーは、iframe の後に iframe の寸法を調整するために使用されます。がロードされました。
• オプションの追加コード (コメントアウト) を使用して、ページ上のすべての iframe のサイズを変更できます。

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