HTML - Web 消息传递_HTML 菜鸟教程

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

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

消息事件

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

消息事件的属性

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

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

发送跨文档消息

在发送跨文档消息之前，我们需要通过创建新的 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);

<< HTML - 索引数据库（indexedDB） HTML - CORS（跨域资源共享） >>