使用postMessage来实现父子通信跨域

使用postMessage来实现父子通信跨域

1.子向父通信

parent.html

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

child.html

window.parent.postMessage({
         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;