window.postMessage

作用

window.postMessage()方法可以安全地实现跨源通信。
一般情况下，两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https）、端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage()方法提供了一种受控机制来规避此限制。
注意：只要正确的使用，这种方法就很安全。

语法

1、 发送消息

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

• targetWindow
  其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过ID或数值索引的window.frames。
• message
  将要发送到其他 window的数据。
• targetOrigin
  通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI（强烈建议使用URL，目标窗口的协议、主机地址或端口这三者都匹配，消息才会被发送。防止消息泄露）。
• transfer
  可选。是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

2、监听消息

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
  // For Chrome, the origin property is in the event.originalEvent
  // var origin = event.origin || event.originalEvent.origin; 
}

接收消息的event

• data
  从其他 window 中传递过来的对象。
• origin
  调用 postMessage 时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。
• source
  对发送消息的window对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。

实例

parent HTML

 
        
        发送消息
    
    

iframe HTML

 
        
iFrame-child
        
    

总结

• 如果不希望从其他网站接收message，请不要为message事件添加任何事件侦听器。 这是一个完全万无一失的方式来避免安全问题。
• 如果希望从其他网站接收message，请始终使用origin和source属性验证发件人的身份。
• 当使用postMessage将数据发送到其他窗口时，始终指定精确的目标origin，而不是*。