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

コンテンツに基づいて iframe の高さを動的に変更する

質問:

Web サイト内に iframe を組み込む目的は、次のとおりです。 iframe の適切な高さを動的に決定します。理想的には、iframe はスクロールバーなしで表示されるコンテンツに適応し、Web サイト内でシームレスに統合されるようにする必要があります。

回答:

最初は JavaScript で高さを計算しようとしましたが、アクセス拒否された権限により進行が妨げられました。 。その後、Ajax または PHP を使用することが検討されました。

しかし、解決策は、window.onload 内の iframe 化されたページからのトリガーを利用して、本体の高さを親ページに伝えることにあります。その後、親はそれに応じて iframe の高さを調整します。

<code class="html"></code>

<code class="javascript">function resizeIframe(newHeight)
{
    document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}</code>

iframe は最初はデフォルトの高さで表示される場合がありますが、最初に読み込み中の画像を表示し、iframe を非表示にすることでこれを軽減できます。 ResizeIframe 関数が高さの更新を受け取ると、読み込み中の画像を削除して iframe を表示し、Ajax のようなエクスペリエンスをシミュレートできます。

また、クロスドメインの制限が生じた場合は、プロキシ PHP スクリプトを使用して埋め込みを容易にすることもできます。ただし、最大限の制御と実装の容易さを実現するには、PHP 経由でブログの RSS フィードを直接埋め込むことが実行可能なソリューションとなります。

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