HTML5 – Web 消息传送

Web 消息传送是从服务器实时向客户端浏览器发送消息的能力。它覆盖了不同域、协议或端口之间的跨域通信问题。

例如，您想将页面上的数据发送到放置在iframe或语音的广告容器，此时，浏览器会抛出安全异常，使用Web消息传送，我们可以将数据传递为消息事件。

消息事件

消息事件会触发跨文档消息，通道消息，服务器发送事件和Web套接字。它由消息事件界面来描述。

属性

序号	属性和描述
1	data 包含字符串数据
2	origin 包含域名和端口
3	lastEventId 包含当前消息事件的唯一标识符。
4	source 包含对源文档窗口的引用
5	ports 包含由任何消息端口发送的数据

发送跨文档消息

在发送跨文档消息之前，我们需要创建一个新的Web浏览上下文，如创建新的iframe或新窗口。我们可以使用postMessage()发送数据，它有两个参数。它们是−

message − 要发送的消息
targetOrigin −源名称

示例

从iframe发送消息到button

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('要发送的消息。',
      'https://www.tutorialspoint.com');
}
button.addEventListener('click',clickHandler,false);

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

var messageEventHandler = function(event){

   // 检查来源是否为我们想要的。
   if(event.origin == 'https://www.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 ) {

         // 将端口传递给iframe[1]
         iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
      }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

现在第二个文档使用portMsgHandler函数处理数据。

var loadHandler() {

   // 定义我们的消息处理函数
   var messageHandler = function(messageEvent) {

      // 我们的表单提交处理程序

      var formHandler = function() {
         var msg = '将添加到游戏圈。';
         messageEvent.ports[0].postMessage(msg);
      }
      document.forms[0].addEventListener('submit',formHandler,false);
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);