Web消息传递是文档分离浏览上下文以共享数据而无需Dom的方式。它覆盖了不同域,协议或端口中的跨域通信问题
消息事件触发跨文档消息传递,通道消息传递,服务器发送的事件和WebSocket。消息事件接口已对此进行了描述。.
Sr.No. | 属性 & 描述 |
---|---|
1 | data 包含字符串数据 链接:https://www.learnfk.comhttps://www.learnfk.com/html5/html5-web-messaging.html 来源:LearnFk无涯教程网 |
2 | origin 包含域名和端口 |
3 | lastEventId 包含当前消息事件的唯一标识符。 |
4 | source 包含对原始文档窗口的引用 |
5 | ports 包含任何消息端口发送的数据 |
发送跨文档消息之前,无涯教程需要通过创建新的iframe或新窗口来创建新的Web浏览上下文。可以使用postMessage()发送数据,它有两个参数。
从iframe向按钮发送消息
var iframe=document.querySelector('iframe'); var button=document.querySelector('button'); var clickHandler=function() { iframe.contentWindow.postMessage('The message to send.', 'https://www.learnfk.com); } button.addEventListener('click',clickHandler,false);
在接收文档中接收跨文档消息
var messageEventHandler=function(event){ //check that the origin is one we want. if(event.origin == 'https://www.learnfk.com') { alert(event.data); } } window.addEventListener('message', messageEventHandler,false);
浏览上下文之间的双向通信称为通道消息传递。对于跨多个来源的通信很有用。
创建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() { //定义我们的消息处理函数 var messageHandler=function(messageEvent) { //我们的表单提交处理程序 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);
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)