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/