JavaScript を使用して iFrame の高さを動的に調整する方法

JavaScript を利用して iFrame の高さを動的に調整します

スクロールバーの必要性を排除し、コンテンツに適応する応答性の高い iframe を作成するための取り組み場合は、次の解決策の採用を検討してください:

ヘッド セクション変更:

次のスクリプトを に導入します。 Web ページのセクション:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>

iFrame の変更:

iframe コードを次のように変更します:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

この JavaScript 関数は次のように取得しますiframe のコンテンツ ドキュメントの高さを指定し、それに応じて iframe の高さを設定します。 iframe が最初に読み込まれるとき、またはそのコンテンツが変更されるときに、resizeIframe 関数がトリガーされ、iframe の高さが常にそのコンテンツと同期していることが保証されます。

以上がJavaScript を使用して iFrame の高さを動的に調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。