コンテンツに合わせて iframe のサイズを動的に変更するにはどうすればよいですか?-PHPチュートリアル-php.cn

質問:

回答:

ホームページ

バックエンド開発

PHPチュートリアル

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

Barbara Streisand

Oct 26, 2024 pm 07:44 PM

How Can I Dynamically Resize an Iframe to Fit Its Content?

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

質問:

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

回答:

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

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

<code class="html"><body onload='parent.resizeIframe(document.body.scrollHeight)'></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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。