コンテンツに合わせて iframe のサイズを動的に変更するにはどうすればよいですか?
- Barbara Streisandオリジナル
- 2024-10-26 19:44:02450ブラウズ
コンテンツに基づいて 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 までご連絡ください。