jQuery/JavaScript で Iframe の高さを動的に調整する方法

jQuery/Javascript を使用した動的 iframe 高さ調整

スクロールバーを表示せずに iframe の高さをコンテンツに合わせて動的に調整するには、以下を利用できます。 jQuery/JavaScript を使用した次のアプローチ:

まず、ラッパーを特定します。すべてのコンテンツを含む iframe 内に div タグを追加し、それを「contentWrap」などの変数に割り当てます。

次に、次のコードを使用してコンテンツの高さを取得します。

var contentHeight = $("contentWrap").height();

最後に、コンテンツに合わせて iframe の高さを更新します。

$("#iframeID").height(contentHeight + 50 + "px"); // Optional additional margin

この手法は、iframe の高さへのアクセスに依存しています。 「contentWindow」プロパティを介してコンテンツを取得します。 「 50px」のマージンは要件に基づいてカスタマイズできます。

この例では、「TB_window」 div は親ページの iframe のコンテナを表します。 body 要素のスクロールの高さに基づいて iframe の高さを変更することで、コンテンツが溢れることなく iframe 内に収まるようにすることができます。

ただし、潜在的なクロスドメインの問題を処理するには、次の方法を使用することをお勧めします。クロスオリジン リソース共有 (CORS) ポリシー、または DOM の直接操作の代わりに「postMessage」を使用します。

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