HTML 5のwindowでPostMessageは2つのページ間でデータを転送する

HTML 5 APISにwindowがあることを知っている人は少ないと思います.postMessage API. window.postMessageの機能は、プログラマがドメイン間で2つのウィンドウ/frames間でデータ情報を送信することを可能にすることである.基本的には、ドメイン間AJAXのようなものですが、ブラウザとサーバの間ではなく、2つのクライアント間で通信しています.window.postMessageがどのように働いているかを見てみましょう.この機能は、IE 6、IE 7以外のすべてのブラウザでサポートされています.
デモを見る
データ送信先
まず、通信発信元、すなわちデータソース「source」を作成します.発起人として、新しいウィンドウをオープンしたり、iframeを作成したりして、新しいウィンドウにデータを送信したりすることができます.簡単に言えば、6秒ごとに送信し、メッセージリスナーを作成して、ターゲットウィンドウからフィードバックされた情報をリスニングします.

//       
var domain = 'http://scriptandstyle.com';
var myPopup = window.open(domain 
            + '/windowPostMessageListener.html','myWindow');

//        
setInterval(function(){
	var message = 'Hello!  The time is: ' + (new Date().getTime());
	console.log('blog.local:  sending message:  ' + message);
        //send the message and target URI
	myPopup.postMessage(message,domain);
},6000);

//      
window.addEventListener('message',function(event) {
	if(event.origin !== 'http://scriptandstyle.com') return;
	console.log('received response:  ',event.data);
},false);

ここではwindow.addEventListenerを使いましたが、IEではwindow.attachEventを使っているので、IEではこれではだめです.ブラウザのタイプを判断したくない場合は、jQueryやDojoなどのツールライブラリを使用します.
もしあなたのウィンドウが正常に飛び出したとしたら、私たちはURIを指定する必要があります(必要であればプロトコル、ホスト、ポート番号などを指定する必要があります)、メッセージの受信者はこの指定したURIにいなければなりません.ターゲットウィンドウが置換されている場合、メッセージは発行されません.
フィードバック情報を受信するイベントリスナーを同時に作成した.メッセージのソースのURIを検証する必要があります.ターゲット側が合法的な場合にのみ、送信されたメッセージを処理することができます.
iframeを使用する場合は、コードは次のように書く必要があります.

//  iframe
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById('myIFrame').contentWindow;

//    
setInterval(function(){
	var message = 'Hello!  The time is: ' + (new Date().getTime());
	console.log('blog.local:  sending message:  ' + message);
        //send the message and target URI
	iframe.postMessage(message,domain); 
},6000);

ノードオブジェクトではなくiframeのcontentWindowプロパティを使用していることを確認します.
データ受信側
次に開発するのは、データ受信側のページです.受信者ウィンドウにはイベントリスナーがあり、「message」イベントを傍受します.同様に、メッセージソースのアドレスを検証する必要があります.メッセージは任意のアドレスから来てもよく、処理されたメッセージが信頼できるアドレスから来ていることを確認します.

//    
window.addEventListener('message',function(event) {
	if(event.origin !== 'http://davidwalsh.name') return;
	console.log('message received:  ' + event.data,event);
	event.source.postMessage('holla back youngin!',event.origin);
},false);

上のコードクリップはメッセージソースに情報をフィードバックし、メッセージが受信されたことを確認します.以下に、重要なイベント・プロパティをいくつか示します.

source–メッセージソース、メッセージの送信ウィンドウ/iframe.

origin–メッセージ・ソースのURI(プロトコル、ドメイン名、ポートを含む場合があります)は、データ・ソースを検証するために使用されます.

data–送信者が受信者に送信するデータ.

この3つのプロパティは、メッセージ転送で使用する必要があるデータです.
デモを見る
Windowsを使用します.postMessage
他のWebテクノロジーと同様に、データソースの合法性を検証しないと、このテクノロジーを使用するのは危険になります.あなたのアプリケーションの安全には責任が必要です.window.postMessageは、JavaScriptテクノロジーに対するPHPのようなものです.window.postMessageはかっこいいですね.