📌  相关文章
📜  HTML5-网络消息传递

📅  最后修改于: 2020-10-23 06:21:35             🧑  作者: Mango

Web消息传递是将实时消息从服务器发送到客户端浏览器的功能。它覆盖了不同域，协议或端口中的跨域通信问题

例如，您希望将数据从页面发送到放置在iframe上或反之亦然的广告容器，在这种情况下，浏览器会抛出安全异常。使用网络消息传递，我们可以将数据作为消息事件传递。

讯息事件

消息事件触发跨文档消息传递，通道消息传递，服务器发送的事件和Web套接字。消息事件界面已对此进行了描述。

属性

Sr.No. Attributes & 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

发送跨文档消息

发送跨文档消息之前，我们需要通过创建新的iframe或新窗口来创建新的Web浏览上下文。我们可以使用postMessage（）发送数据，它有两个参数。他们是-

  • 消息-要发送的消息
  • targetOrigin-来源名称

例子

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

频道讯息

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

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