クロスドメイン IFrame のサイズを変更するにはどうすればよいですか?

クロスドメイン iFrame のサイズ変更

別のドメインから iframe のサイズを変更するタスクには、クロスドメインの制限により課題が生じます。 3 フレームのソリューションが提案されていますが、Chrome や Safari などの最新のブラウザーでは互換性の問題に直面しています。

提案されたソリューション

制限があるにもかかわらず、いくつかの方法は、クロスドメイン iframe を実現するために検討されていますresizing:

• EasyXDM: このサードパーティ ライブラリは、異なるドメイン間の通信を可能にし、信頼性の高いソリューションを提供します。ただし、親ドメインと子ドメインの両方で統合が必要です。
• postMessage: HTML5 postMessage API を利用して、子ドメインは必要な高さのメッセージを親ドメインに送信できます。親ドメインはそれに応じて iframe のサイズを変更できます。このアプローチはほとんどのブラウザーでサポートされており、クロスブラウザー ソリューションを提供します。
• ScrollHeight: 子ドキュメントのscrollHeightプロパティを測定すると、理論的にはiframeの高さが得られます。ただし、クロスドメインの制限により、このプロパティへのアクセスは拒否されます。

課題と制限

クロスドメイン通信は、ブラウザのセキュリティ機能による制限に直面しています。

• 計算されたスタイル: iframe 要素の計算されたスタイルによってその寸法が明らかになりますが、これらの値はクロスドメインからはアクセスできません。
• ドキュメント プロパティ: HTML4 仕様では、document.element を通じて読み取り専用の値を公開することが規定されていますが、クロスドメインではアクセスできません。 - ドメイン アクセスが拒否されました。
• プロキシ フレーム: サイトをプロキシ バックします。高さの計算は、ユーザーのログインまたは複数のページ要求が複雑になるまで機能します。

HTML5 ソリューション

HTML5 では、クロスドメイン通信を容易にする次のような機能が導入されています。

• postMessage: 前述したように、postMessage は次のとおりです。この目的に使用されます。
• WebSocket: HTML5 WebSocket は、クロスドメイン通信のための堅牢なチャネルを提供します。

結論

クロスドメイン iframe のサイズ変更は依然として技術的に困難な作業ですが、postMessage API とHTML5 の進歩により、実行可能なソリューションが提供されます。 easyXDM の実装により、HTML5 非準拠ブラウザに信頼性の高いフォールバックを提供できます。

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