Html5 简明教程

HTML - Web Messaging

Web Messaging 是文档用于分离浏览上下文以共享数据而不使用 Dom 的方法。它克服了在不同域、协议或端口中进行跨域通信的问题。

Web Messaging is the way for documents to separates browsing context to share the data without Dom. It overrides the cross domain communication problem in different domains, protocols or ports.

例如，如果我们要将数据从我们的页面发送到放置在 iframe 或语音相反的广告容器，在这种情况下，浏览器会抛出一个安全异常。通过网络消息传递，我们可以将数据作为消息事件传递。

For example, if we want to send the data from our page to ad container which is placed at iframe or voice-versa, in this scenario, Browser throws a security exception. With web messaging we can pass the data across as a message event.

Message Event

消息事件触发跨文档消息传递、通道消息传递、服务器发送事件和网络套接字。它由 Message Event 接口描述。

Message events fires Cross-document messaging, channel messaging, server-sent events and web sockets. It is described by Message Event interface.

Properties of Message Event

下表包含 Message Event 属性列表：

The following table contains a list of Message Event properties −

S.No.	Property & Description
1	data Contains string data
2	origin Contains Domain name and port
3	lastEventId Contains unique identifier for the current message event.
4	source Contains to A reference to the originating document’s window
5	ports Contains the data which is sent by any message port

Sending a cross-document message

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

Before send cross document message, we need to create a new web browsing context either by creating new iframe or new window. We can send the data using with postMessage() and it has two arguments. They are as

message − The message to send
targetOrigin − Origin name

Examples

从 iframe 向按钮发送消息

Sending message from iframe to button

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

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

Receiving a cross-document message in the receiving document

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

浏览上下文之间的双向通信称为通道消息传递。对于跨多个来源的通信，它非常有用。

Two-way communication between the browsing contexts is called channel messaging. It is useful for communication across multiple origins.

The MessageChannel and MessagePort Objects

创建消息通道时，它内部创建两个端口来发送数据并转发到另一浏览上下文。

While creating messageChannel, it internally creates two ports to sending the data and forwarded to another browsing context.

postMessage() − Post the message throw channel
start() − It sends the data
close() − it close the ports

在这个场景中，我们正在从一个 iframe 向另一个 iframe 发送数据。这里我们在函数中调用数据并将数据传递给 DOM。

In this scenario, we are sending the data from one iframe to another iframe. Here we are invoking the data in function and passing the data to 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

Above code, it is taking the data from port 2, now it will pass the data to second 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 函数处理数据。

Now second document handles the data by using the portMsgHandler function.

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