HTML - 網頁訊息傳遞

網頁訊息傳遞是文件分離瀏覽上下文以共享資料而無需 DOM 的方式。它克服了不同域、協議或埠之間跨域通訊的問題。

例如，如果我們想將資料從我們的頁面傳送到放置在 iframe 中的廣告容器或反之亦然，在這種情況下，瀏覽器會丟擲一個安全異常。使用網頁訊息傳遞，我們可以將資料作為訊息事件傳遞。

訊息事件

訊息事件觸發跨文件訊息傳遞、通道訊息傳遞、伺服器傳送事件和 Web 套接字。它由訊息事件介面描述。

訊息事件的屬性

下表包含訊息事件屬性列表：

傳送跨文件訊息

在傳送跨文件訊息之前，我們需要透過建立新的 iframe 或新視窗來建立一個新的 Web 瀏覽上下文。我們可以使用 postMessage() 傳送資料，它有兩個引數。它們是：

• message - 要傳送的訊息

• targetOrigin - 源名稱

示例

從 iframe 傳送訊息到按鈕

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

在接收文件中接收跨文件訊息

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

通道訊息傳遞

瀏覽上下文之間的雙向通訊稱為通道訊息傳遞。它對於跨多個源的通訊很有用。

MessageChannel 和 MessagePort 物件

在建立 messageChannel 時，它會在內部建立兩個埠來發送資料並轉發到另一個瀏覽上下文。

• 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 獲取資料，現在它將資料傳遞到第二個 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 函式處理資料。

var loadHandler(){
   // Define our message handler function
   var messageHandler = function(messageEvent){
      
      // Our form submission handler
      var formHandler = function(){
         var msg = 'add <foo@example.com> 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);