在开发中我们会遇到因为不同域的原因造成无法互相发送信息，这时就可以通过window.postMessage()来实现；例如在一个页面中嵌入iframe页面，此刻就需要用到跨源通信。

先来说说什么是跨源通信，由于浏览器的同源限制,只有在相同协议、ip以及端口号的两个页面才能相互通信。而window.postMessage()采取了某种机制规避这种限制,可以实现安全的跨源通信。

如何发送信息？

发送消息通过Window.postMessage(message, targetOrigin, [transfer])

方法 Window.postMessage(message, targetOrigin, [transfer])

三个参数的意义： message 发送到其他window的信息 targetOrigin 发送信息的目标url，如果没有指定目标url用字符串*表示；但是为了安全，如果你知道目标url建议使用目标url。 transfer(可选参数) 是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

如何接收信息？

Window.postMessage(message, targetOrigin, [transfer])这个方法只是单纯的将信息进行了发送（发送到window)，接收信息需要通过window进行监听，并且发送过来的数据都保存在message中：

监听的方法 window.addEventListener(“message”, receiveMessage, false);

message有三个属性： data 从其他 window 中传递过来的对象。 orgin 通过Window.postMessage()发送过来的源地址 source 对发送消息的窗口对象的引用; 您可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。

看实例：

在1.html文件中触发Window.postMessage()将数据发送到2.html文件中，并通过点击事件进行赋值。

触发前：

触发后：

测试代码：

1.html:

Document

窗口1

2.html:

Document

窗口2

精彩内容

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。