Html5-web-messaging

HTML5-Webメッセージング

Webメッセージングは​​、ドキュメントがブラウジングコンテキストを分離し、Domなしでデータを共有する方法です。 異なるドメイン、プロトコル、またはポートでのクロスドメイン通信の問題を無効にします

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

メッセージイベント

メッセージイベントは、ドキュメント間メッセージング、チャネルメッセージング、サーバー送信イベント、およびWeb Sockets.itを起動します。

属性

Sr.No.	Attributes & Description
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.finddevguides.com);
}
button.addEventListener('click',clickHandler,false);

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

var messageEventHandler = function(event){

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

チャンネルメッセージング

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

MessageChannelおよびMessagePortオブジェクト

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

• * postMessage（）*-メッセージスローチャネルを投稿する
• * start（）*-データを送信します
• * close（）*-ポートを閉じます

このシナリオでは、1つの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);