html5发消息,HTML5 - Web消息传递( Web Messaging)

HTML5 - Web消息传递( Web Messaging)

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

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

消息事件

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

属性 (Attributes)Sr.No.属性和描述

1data

包含字符串数据

2origin

包含域名和端口

3lastEventId

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

4source

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

5ports

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

发送跨文档消息

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

targetOrigin - 原产地名称

例子 (Examples)

从iframe发送消息到按钮var iframe = document.querySelector('iframe');

var button = document.querySelector('button');

var clickHandler = function() {

iframe.contentWindow.postMessage('The message to send.',

'https://www.iowiki.com);

}

button.addEventListener('click',clickHandler,false);

在接收文档中接收跨文档消息var messageEventHandler = function(event){

// check that the origin is one we want.

if(event.origin == 'https://www.iowiki.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获取数据，现在它将数据传递给第二个iframevar 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);

HTML5 - IndexedDB( IndexedDB)