H 5文書間メッセージング

同源ポリシーの制限のため、JavaScriptのドメイン間問題は、ずっと厄介な問題です.しかし、HTML 5は、Webドキュメント間で相互に情報を受信し送信する機能postMessageを提供し、IE 8がサポートを開始する.この機能を使用すると、Webページが存在するウィンドウオブジェクトのインスタンスを取得するだけでなく、同じソース(ドメイン+ポート番号)のWebページ間で相互に通信するだけでなく、ドメイン間通信**を実現することもできます.
1.メッセージ送信
otherWindow.postMessage(message, targetOrigin);
他のウィンドウから送信された情報を受信するには、ウィンドウオブジェクトのonmessageイベントをリスニングする必要があります.他のウィンドウはpostMessageメソッドでデータを渡すことができます.PostMessageメソッドでは、2つのパラメータが使用されます.1つ目のパラメータは、送信されたメッセージテキストですが、任意のJavaScriptオブジェクト(JSONでオブジェクトをテキストに変換)でもよいし、2つ目のパラメータは、メッセージを受信するオブジェクトウィンドウのURLアドレスであり、URLアドレス文字列でワイルドカード'*'ですべて指定できます.
(1)otherWindowは受信側ウィンドウへの参照であり、一般的には(a)、window.frames[0].postMessage (b)、document.getElementsByTagName('iframe')[0].contentWindow (c)、window.opener.postMessage (d)、event.source.postMessage
2.メッセージ受信
postMessageから送信されたメッセージを処理するには、他のページまたはサブページにonmessageイベント(postmessageが参照するwindowをメッセージ受信する)**を追加します.

window.addEventListener('message',function(event){
    console.log(event.data,event.origin,event.source);
｝);

このonmessageイベントは、コード内のeであり、実際にはeventオブジェクトであるパラメータを受け入れます.しかし、彼の中には明らかな3つのパラメータが他のeventオブジェクトとは異なる.すなわち、(a)data:名前の通り、メッセージを送信するウィンドウオブジェクト(c)origin:メッセージを送信するウィンドウのソースurl(プロトコル+ホスト+ポート番号)である.例えば2.comから1.comはメッセージを送って、それでは1.comがメッセージを受信すると、e.originは2.com
最も重要なのはdataです.e.dataで彼を取得して、後続の操作をすることができます.しかし、安全のために、e.sourceとe.originが正しいソースかどうかを判断してから操作したほうがいいです.
注意:直接windowではなくaddEventListenerまたはattachEventによってonmessageイベントに参加することが望ましい.onmessage=function(){}は、このように加算すると認識できないブラウザがあるため(低版Firefoxなど)