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.com);
}
button.addEventListener('click',clickHandler,false);

在接收文档中接收跨文档消息

var messageEventHandler = function(event){
   // check that the origin is one we want.
   if(event.origin == 'https://tutorialspoint.com'){
      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 <[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);