iframe跨域通信方法详解window.postMessage

今天接到个需求，A页面中要嵌入一个iframe，这个iframe是B页面，此时A页面需要得到B页面的一些信息。

window.postMessage()

我们都知道浏览器的同源策略，即对于两个不同页面的脚本，只有当他们的页面具有相同的协议，端口号和主机（document.domain）时，两个脚本才能互相通信。
window.postMessage()方法规避了此限制，只要正确使用，这种方法就很安全。

重点：window.postMessage中的window始终是你要通信的目标页面的window。

用法

window.postMessage(message, targetPage, [transfer]);

• message： 要传递的data
• targetPage：你要发送信息的目标域名
• transfer：可选参数。是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

实例

如果B页面需要向A页面传递message的话，在B页面使用window.postMessage方法向A页面传递message：

top.