Html 简明教程

HTML - Web Messaging

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

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

Message Event

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

Properties of Message Event

下表包含 Message Event 属性列表：

S.No.

Property & Description

1

data Contains string data

2

origin 包含域名和端口

3

lastEventId 包含当前消息事件的唯一标识符。

4

source 包含对原始文档窗口的引用

5

ports 包含任何消息端口发送的数据

Sending a cross-document message

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

  1. message − 要发送的消息

  2. targetOrigin − Origin name

Examples

从 iframe 向按钮发送消息

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

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

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

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

The MessageChannel and MessagePort Objects

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

  1. postMessage() − 通过通道发布消息

  2. start() − 它发送数据

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