HTML5 之跨域通讯（postMessage）

很多情况下，我们受到浏览器的安全策略限制。如何能规避此限制，并且能安全的使用跨域通讯，这就不得不介绍一下 postMessage 了。

一、关于 postMessage

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

通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数 Document.domain 设置为相同的值) 时，这两个脚本才能相互通信。

window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

二、理解过程

window.postMessage() 方法被调用时，会在所有页面脚本执行完毕之后向目标窗口派发一个 MessageEvent 消息。 该 MessageEvent 消息有四个属性：

1.message 属性表示该 message 的类型；
2.data 属性为 window.postMessage 的第一个参数；
3.origin 属性表示调用 window.postMessage() 方法时调用页面的当前状态；
4.source 属性记录调用 window.postMessage() 方法的窗口信息。

关于更多细节，我们可以查看 MDN 文档，这里就不赘述了。