window.postMessage() 解决跨域，子父窗口通信

最近看到一个解决跨域的方法，记录一下

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

• message 属性表示该message 的类型
• data 属性为 window.postMessage 的第一个参数
• origin 属性表示调用window.postMessage() 方法时调用页面的当前状态
• source 属性记录调

语法

otherWindow.postMessage(message,targetOrigin,[transfer]);

otherWindow:其他窗口的引用，比如iframe的contentWindow属性
message:将要发送到其他window的数据，这个数据会自动被序列化，数据格式也不受限制(字符串，对象都可以)
targetOrigin:通过窗口的origin属性来指定哪些窗口能接收到消息事件，这个值可以是"*"(表示无限制)，或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或者端口这三个的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送。这个值最好始终存在，而不是*，这样能有效的避免第三方截获

transfer(可选)：是一串和message同事传递的Transferable对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

例子：

上面的例子中，点击发送，会发送一个字符串给iframe引入的页面，然后通过监听message事件，然后做相应的操作。
相应的，点击iframe页面里面的按钮，也能发送数据给parent页面
并且这两个页面在不同的域名下，也是不影响操作的。

源码
参考:
MDN