HTML5-Webメッセージング

Webメッセージングは、サーバーからクライアントブラウザにリアルタイムメッセージを送信する機能です。異なるドメイン、プロトコル、またはポートでのクロスドメイン通信の問題を無効にします

たとえば、ページからiframeまたは音声に配置された広告コンテナにデータを送信したい場合、このシナリオでは、ブラウザはセキュリティ例外をスローします。Webメッセージングを使用すると、データをメッセージイベントとして渡すことができます。

メッセージイベント

メッセージイベントは、クロスドキュメントメッセージング、チャネルメッセージング、サーバー送信イベント、およびWebソケットを起動します。メッセージイベントインターフェイスで説明されています。

属性

シニア番号	属性と説明
1	data 文字列データが含まれています
2	origin ドメイン名とポートが含まれています
3	lastEventId 現在のメッセージイベントの一意の識別子が含まれます。
4	source 元のドキュメントのウィンドウへの参照が含まれています
5	ports 任意のメッセージポートによって送信されるデータが含まれます

クロスドキュメントメッセージの送信

クロスドキュメントメッセージを送信する前に、新しいiframeまたは新しいウィンドウを作成して新しいWebブラウジングコンテキストを作成する必要があります。postMessage（）を使用してデータを送信でき、2つの引数があります。それらは次のようになります-

message −送信するメッセージ
targetOrigin −オリジン名

例

iframeからボタンにメッセージを送信する

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('The message to send.',
      'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

受信ドキュメントでクロスドキュメントメッセージを受信する

var messageEventHandler = function(event){
   
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com') {
      alert(event.data);
   }
}
window.addEventListener('message', messageEventHandler,false);

チャネルメッセージング

ブラウジングコンテキスト間の双方向通信は、チャネルメッセージングと呼ばれます。複数の発信元にまたがる通信に役立ちます。

MessageChannelオブジェクトとMessagePortオブジェクト

messageChannelの作成中に、データを送信して別のブラウジングコンテキストに転送するための2つのポートを内部的に作成します。

postMessage() −メッセージスローチャネルを投稿する
start() −データを送信します
close() −ポートを閉じます

このシナリオでは、あるiframeから別のiframeにデータを送信しています。ここでは、関数内のデータを呼び出し、データをDOMに渡します。

var loadHandler = function() {
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
   
   portMessageHandler = function(portMsgEvent) {
      alert( portMsgEvent.data );
   }
   
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

上記のコードでは、ポート2からデータを取得し、2番目のiframeにデータを渡します。

var loadHandler = function() {
   var iframes, messageHandler;
   iframes = window.frames;
   
   messageHandler = function(messageEvent) {
      
      if( messageEvent.ports.length > 0 ) {
         
         // transfer the port to iframe[1]
         iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
      }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

次に、2番目のドキュメントがportMsgHandler関数を使用してデータを処理します。

var loadHandler() {
   
   // Define our message handler function
   var messageHandler = function(messageEvent) {
   
      // Our form submission handler
      
      var formHandler = function() {
         var msg = 'add <[email protected]> to game circle.';
         messageEvent.ports[0].postMessage(msg);
      }
      document.forms[0].addEventListener('submit',formHandler,false);
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);