Web Messaging是文档分离浏览上下文以在没有Dom的情况下共享数据的方式.它会覆盖不同域，协议或端口中的跨域通信问题

例如，您希望将页面中的数据发送到位于iframe的广告容器，反之亦然，在这种情况下，浏览器会抛出安全性异常.通过Web消息传递，我们可以将数据作为消息事件传递.

消息事件

消息事件触发跨文档消息传递，通道消息传递，服务器-sent事件和web sockets.it已由Message Event接口描述.

Attributes

发送跨文档消息

发送交叉之前文档消息，我们需要通过创建新的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://www.it1352.com);
}
button.addEventListener('click',clickHandler,false);

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

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