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

コンテンツに基づいて Iframe の高さを動的に調整する方法

iframe のコンテンツが高さ制限を超えるシナリオでは、動的に調整することが重要です余分なコンテンツを収容できるサイズにします。これは、JavaScript と JQuery を組み合わせて使用​​して実現できます。

iframe のコンテンツの高さを取得するには、次のコードを利用します。

contentWindow.document.body.scrollHeight

iframe がロードされたら、動的にサイズを変更します。使用:

function iframeLoaded() {
  var iFrameID = document.getElementById('idIframe');
  if (iFrameID) {
    // Delete and recreate the height to ensure proper resizing
    iFrameID.height = "";
    iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }
}

iframe に「onload」イベント ハンドラーを含めるtag:

<iframe>

iframe 内でフォーム送信後の動的なサイズ変更を処理するには、iframe のコンテンツ スクリプトに次のコードを含めます:

parent.iframeLoaded();

このアプローチにより、iframe の高さが確実に調整されます。すべてのコンテンツに動的に対応できるようにすることで、スクロール バーの必要性を排除し、さまざまなブラウザ間での流動的なユーザー エクスペリエンスを維持します。

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