Ajax や PHP を使用せずに iframe のサイズを動的に変更するにはどうすればよいですか?-PHPチュートリアル-php.cn

Ajax や PHP を使用せずに iframe のサイズを動的に変更するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-10-27 02:10:02

オリジナル

687 人が閲覧しました

How to Dynamically Resize Iframes Without Ajax or PHP?

iframe の動的なサイズ変更: 高さの制約を克服する

iframe に外部コンテンツを埋め込む場合、高さを動的に調整して不要なスクロールバーを排除することが重要です。。アクセシビリティの問題を回避し、単一ページのシームレスなエクスペリエンスを維持するために、Ajax や PHP 以外のオプションを検討します。

解決策: JavaScript を使用したクロスドメイン通信

残念ながら, Ajax と PHP は、クロスドメインの制限により、このシナリオでは不十分です。代わりに、JavaScript を使用して、iframe のコンテンツと親ページの間のクロスドメインインタラクションを開始します。

ステップ 1: Iframe ページから高さの計算をトリガーする

このコードを iframe の本文に挿入します:
```
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
```
ログイン後にコピー

ステップ 2: 親ページのサイズ変更関数

親ページの JavaScript で、iframe の高さを調整する関数を定義します:

function resizeIframe(newHeight)
{
  document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}

ログイン後にコピー

初期の高さと読み込みの処理

制限事項と考慮事項

このソリューションは同じドメイン内で動作します。クロスドメイン埋め込みの場合は、PHP プロキシスクリプトを使用するか、ブログの RSS フィードを直接埋め込むことを検討してください。

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

php 8、私も来ます