ホームページ >ウェブフロントエンド >CSSチュートリアル >メッセンジャーを使用してクロスドメイン iFrame のサイズを変更するにはどうすればよいですか?

メッセンジャーを使用してクロスドメイン iFrame のサイズを変更するにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-07 18:23:11320ブラウズ

How Can I Resize a Cross-Domain iFrame Using Messengers?

メッセンジャーによるクロスドメイン iFrame のサイズ変更

別のドメインでの iFrame のサイズ変更は、クロスドメイン アクセスに対する制限により問題が発生します。いくつかの解決策が存在しますが、最も効果的な解決策の 1 つはメッセンジャーの使用です。

1 つのアプローチは、異なるドメイン間の通信を容易にするライブラリである easyXDM を採用することです。サーバー上で、easyXDM 機能を備えたページを確立し、それを iFrame のターゲットとして設定します。このページは iFrame からメッセージを受け取り、それに応じてサイズを変更します。

呼び出し元のドメインには、サーバーで使用されているのと同じ中間ページを含めます。ユーザーがこのドメインの iFrame にアクセスすると、中間ページがサイズ変更指示を iFrame に中継します。

もう 1 つのオプションは、postMessage API を利用することです。子ページはその高さを計算して親ページに送信し、親ページが iFrame の高さを調整します。親ページのイベント リスナーは子からメッセージを受信し、新しい高さを iFrame に伝えます。

追加のメソッド

これらのメッセンジャー アプローチは信頼できますが、検討する価値のある他の方法もあります:

  • 3 iFrames: この手法には以下が含まれます複数の iFrame をネストできますが、一部のブラウザでは問題が発生する可能性があります。
  • スクロールの高さの測定: iFrame のスクロールの高さを決定しようとすると、そのサイズの推定値が得られる可能性があります。
  • 計算されたスタイル: Chrome は、このデータに直接アクセスしますが、検査中に iFrame 内の要素の寸法を提供します。通常は実現可能ではありません。
  • HTML4: HTML4 仕様では、要素の寸法の読み取り専用プロパティの概要が説明されていますが、クロスドメインでは簡単にアクセスできません。
  • プロキシ フレーム: サードパーティのサイトを iFrame のソースとして割り当てると、プロキシ サイトでサイズを変更できるようになります。ただし、特定のシナリオでは非実用的または不適切な場合があります。
  • ページの再レンダリング: HTMLUnit や MaxQ などの複雑な JavaScript エンジンは、レンダリングをエミュレートし、非 HTML5 でスクリプトを実行できます。ページのサイズ変更を容易にします。

以上がメッセンジャーを使用してクロスドメイン iFrame のサイズを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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