html5 postMessage解决跨域、跨窗口消息传递

window.postMessage() 方法可以安全地实现跨源通信。

# 父子通信跨域

1.子向父通信

child.html

window.parent.postMessage({
    msg:"xxx"
},'*');

parent.html

window.addEventListener('message',function(e){
console.log(e.data);
if(e.data.msg==='xxx'){
        //一些自己的业务逻辑
    }
});

2.父向子通信

parent.html

var myframe = document.getElementById('myframe');//获取iframe
myframe.contentWindow.postMessage({data:'parent'},childDomain);//childDomain是子页面的源（协议+主机+端口号）

child.html

window.addEventListener('message', function(e){
    console.log(e.data.data);
})

注意： 1.子向父，子 postMessage,父监听 message; 2.父向子，父 postMessage,子监听 message; 3.测试发现，子向父 postMessage 的时候，源可以写为‘*’，父向子 postMessage 的时候，源需要写成子的源，(也就是子页面的协议+主机号+端口)

# 测试代码部分

* 向下 postMessage

var postMessage = function(id, msg, d) {
    /**
     *  data 可以自定义为 object 或者 string
     *  data 为 object
    */
    var data = {};
    data.identify = id;
    data.msg = msg;
    data.data = d;
    gameFrame.contentWindow.postMessage(data, "*")
};

* 向上 postMessage

var chatReport = function(data) {
    /* data 为 string */
    parent.window.postMessage(data, "*")
};

* 监听 Message（通用）

window.addEventListener('message', function(e){
    console.log(e.data);
});