postMessage消息跨域互传，子传父，父传子

postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

以下父域名为http://localhost，子域名为http://localhost:8000

父传子

//html
<iframe id="iframe" src="http://localhost:8000" width="1000" height="600"></iframe>
//js
window.onload = function(){
    document.getElementById("iframe")
       .contentWindow.postMessage("hello, I am your father","http://localhost:8000");
}

子传父

//子页面向父页面发送消息
window.onload = function(){
    window.parent.postMessage("hello, I am your child", "http://localhost");
}

消息接收监听，消息接收时还可以进行消息回传

window.addEventListener('message', function (e) {
    //打印接收到的消息
    console.log(e.data);
    //消息回传
    e.source.window.postMessage("我收到消息再发消息", "*");
},false); 

当你会用的时候，那再来看看postMessage语法

otherWindow.postMessage(参数1，参数2，[参数3])
1、otherWindow：其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
2、参数1：要发送的消息字符串
3、参数2：指定哪些窗口能接收到消息事件。
（1）当值为一个url时，只有该url页面能接收到消息，
（2）当值是字符串"*"（表示无限制）
4、参数3（只做了解，其实你可以忽略）：可选。是一串和message 同时传递的 Transferable对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
Transferable：
（1）Transferable 接口代表一个能在不同可执行上下文中相互传递的对象，列如主线程和 Worker 间。
（2）这是一个抽象接口且没有任何对象属于此类型。它也没有定义任何方法和属性；它只是一个标签，用来指示对象在特定场合可用，如通过 Worker.postMessage() 方法传递到 Worker 。
（3）ArrayBuffer 、MessagePort 和 ImageBitmap 实现于此接口。