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

コンテンツの高さに動的に一致するように iFrame の高さを変更する

質問: iframe の高さを動的に設定するにはどうすればよいですかコンテンツの高さに合わせてスクロールバーを不要にしますか?

答え:

従来の JavaScript メソッドではアクセス拒否エラーが発生する可能性がありますが、直接通信を伴う解決策は、 iframe とその親ページの間を使用できます。

実装:

1. iFrame ページからのトリガー:

   • iFrame ページの本文に、window.onload を使用して本文の高さを親ページに渡す onload トリガーを追加します。

2. サイズ変更親ページの関数:

   • 親ページで、新しい高さを引数として受け取るresizeIframeというJavaScript関数を作成します。
   • iframeの高さを次のように調整します。新しい高さに合わせて、ボディの外側のパディングや要素を収容するためにわずかなオフセットを追加します。

3. 統合:

   • 最初は iFrame を非表示にし、読み込み中の画像を表示します。
   • resizeIframe 関数が実行されると、読み込み中の画像は非表示になり、シームレスな外観のために iFrame が表示されます。

制限事項:

この方法は、同一ドメイン通信に依存します。 iFrame が別のドメインから発信されている場合は、プロキシ PHP スクリプト、またはブログの RSS フィードを親ページに直接統合する必要がある場合があります。

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