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也可以用于同域名间信息交流。
 
原文地址:https://www.cnblogs.com/chuangweili/p/5166292.html