cross-document message 跨文档通信 HTML5

跨域通信HTML5提供了XDM(cross-document message)安全简单接口:

核心是 postMessage()方法,用来向另一个地址传送信息:

var iframeWindow = document.getElementById(“myframe”).contentWindow; //note: all browsers that support XDM also support iframe contentWindow

iframeWindow.postMessage(“A secret”, “http://www.wrox.com”);

如果postMessage第二个参数为*,那么久可以向任何域传递信息了(不推荐啊)

当信息被接收,接收方的window会触发一个message事件,是异步产生的。该事件有三个重要的属性:

data:postMessage发送的字符串数据(即第一个参数)

origin:发送该信息的域名(例如“http://www.wrox.com”)

source:发送该信息的window对象代理,如果需要返回信息给发送方就在该对象上调用postMessage

因此在接收信息的时候也应该验证发送域信息:

EventUtil.addHandler(window, “message”, function(event) {

if (event.origin == “http://www.wrox.com”) { //ensure the sender is expected

processMessage(event.data); //处理信息

event.source.postMessage(“Received!”, “http://p2p.wrox.com”); //有需要也可以返回信息

}

});

注意:第一个参数原本只允许string,后来文档改了允许结构化数据,但是浏览器不一定跟进了,所以对于结构化数据,用JSON.stringify()转化为字符串,接收数据的时候再转为JSON

XDM也可以用于同域名间信息交流。

http://dev.w3.org/html5/postmsg/