Web消息傳遞是文檔在沒有Dom的情況下分離瀏覽上下文以共享數據的方式。它覆蓋不同域、協議或埠中的跨域通信問題

例如，您希望將數據從頁面發送到放置在iframe或voice上的ad容器，在這種情況下，Browser拋出一個安全異常。使用web消息，我們可以將數據作爲消息事件傳遞。

Message Event

消息事件觸發跨文檔消息、通道消息、伺服器發送的事件和web套接字。它由消息事件接口描述。

Attributes

Sending a cross-document message

在發送跨文檔消息之前，我們需要通過創建新的iframe或新窗口來創建新的web瀏覽上下文。我們可以使用with postMessage（）發送數據，它有兩個參數。它們是-;

• message − The message to send
• targetOrigin − Origin name

Examples

從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);

Channel messaging

瀏覽上下文之間的雙向通信稱爲通道消息傳遞。它對於跨多個來源的通信非常有用。

The MessageChannel and MessagePort Objects

在創建messageChannel時，它在內部創建兩個埠來發送數據並轉發到另一個瀏覽上下文。

• Post message（）−發布消息拋出通道

• 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獲取數據，現在它將把數據傳遞給第二個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);

現在，第二個文檔使用portMsgHandler函數處理數據。