HTML - Web 消息传递

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

例如，如果我们想将数据从我们的页面发送到放置在 iframe 上的广告容器，反之亦然，在这种情况下，浏览器会引发安全异常。通过 Web 消息传递，我们可以将数据作为消息事件传递。

消息事件

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

消息事件的属性

下表包含消息事件属性列表 ：

发送跨文档消息

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

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

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