postMessage() を使用して、クロスドメイン iframe ページ間の情報転送メソッドを実装する_javascript スキル

Web オリジン ポリシーの制限により、ページでクロスドメイン iframe リンクが使用されている場合、メイン ページとサブページは相互作用できず、ページ間の情報の転送に多くの問題が発生します。一連の試みの結果、最終的にそれを達成する次の方法を見つけました:

1. サブページ URL のパラメータを渡します

簡単に言うと、メイン ページと同じオリジンを持つ URL に渡す必要があるすべてのパラメータを追加し、サブページをその URL にリダイレクトします。その後、メイン ページは src を通じてこれらのパラメータを取得します。 iframe

の

プロセスは非常に複雑なので、この方法はお勧めできません

2. postMessage()

postMessage() は、HTML5 が提供するイベントベースのメッセージ送信 API であり、クロステキストドキュメント、マルチウィンドウ、クロスドメインメッセージングを実現できます。

postMessage(data,origin) メソッドは 2 つのパラメータを受け入れます

1.data: 渡されるデータ。HTML5 仕様では、このパラメータは JavaScript の任意の基本型またはコピー可能なオブジェクトにできると記載されていますが、一部のブラウザではこれができるわけではありません。パラメータを渡すときに、JSON.stringify() メソッドを使用してオブジェクト パラメータをシリアル化する必要があります。同様の効果は、IE の以前のバージョンで json2.js を参照することによって実現できます。

2.origin: ターゲット ウィンドウのソースを示す文字列パラメータ、プロトコル + ホスト + ポート番号 [+URL]。URL は無視されるため、このパラメータを記述する必要はありません。 postMessage() メソッドのみ メッセージは指定されたウィンドウに渡されます。もちろん、必要に応じてパラメータを「*」に設定することもできます。現在のウィンドウを原点とする場合は、「/」に設定します。

メッセージを送信 (サブページ)

function sendMessage(param) {
  var url;
  if (param.url) {
    url = param.url;
  };
  var dataJson = JSON.stringify({
　　　　 type:1,　　
    a: param.c,
    b: param.c,
    c: param.c,
    url: url
  });
  window.parent.postMessage(dataJson, '*');
}

一部のブラウザは文字列パラメータのみを処理できるため、最初に JSON.stringfy() を使用してパラメータを文字列に変換し、次に受信ページで JSON.parse() を使用してパラメータを変換する必要があります。オブジェクトに戻ります。

メッセージを受信

サブページによって渡されるパラメーターについては、ウィンドウのメッセージ イベントをリッスンすることで取得できます。

window.addEventListener('message', function(e) {
var data = JSON.parse(e.data);
switch (data.type) {
ケース 1:
アラート(data.a);ブレーク;
}
}, false);

メッセージ イベントにはいくつかの重要な属性があります

1.data: 名前が示すように、
で渡されるメッセージです。 2.source: メッセージを送信するウィンドウオブジェクト
3.origin: メッセージウィンドウのソース (プロトコル + ホスト + ポート番号)
クロスドメインのメッセージ配信は、postMessage() メソッドとメッセージ イベントを通じて実現できます。デモでは、子ページを通じてメッセージを親ページに配信するため、送信とウィンドウへのウィンドウを使用します。受信:

window.parent.postMessage(dataJson, '*'); ホームページからサブページへの場合は、送信に window.frames[0] を使用する必要があります。

上記の記事は、クロスドメイン iframe ページ間の情報転送を実現するために postMessage() を使用しています。これは、エディターが共有したすべての内容です。参考にしていただければ幸いです。スクリプト ホームをサポートしていただければ幸いです。