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) {
case 1:
alert(data.a);break;
}
}, false); 

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

1.data: 名前が示すように、
で渡されるメッセージです。

2.source: メッセージを送信するウィンドウオブジェクト

3.origin: メッセージウィンドウのソース (プロトコル + ホスト + ポート番号)

クロスドメインのメッセージ配信は、postMessage() メソッドとメッセージ イベントを通じて実現できます。デモでは、子ページを通じて親ページにメッセージを配信するため、送信には window.parent を使用します。と受信するウィンドウ:

window.parent.postMessage(dataJson, '*');

ホームページからサブページへの場合は、送信に window.frames[0] を使用して受信する必要があります。

上記の内容は、postMessage() を使用して iframe クロスドメイン ページ間の情報転送を実現するための編集者の紹介です。皆様のお役に立てれば幸いです。