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.postMessage('This is page B!', pageA域名);

解释一下为什么这里要用top？

window.postMessage中的window始终是你要通信的目标页面的window，而这里A页面才是通信的目标页面，所以需要用top。

而在A页面需要监听"message"事件来获取B页面传递过来的message。

window.addEventListener('message', this.receiveMessage, false);
receiveMessage = (event) => {
    console.log(event.data);
}

event的属性有：

• data：从页面B传过来的message
• origin：页面B的origin
• source：页面B的引用

如果A页面需要向B页面传递信息呢？
直接上代码：

// Page A
// window为pageB页面的window，即iframe.contentWindow
document.getElementByID('iframe').contentWindow.postMessage(msg, pageB域名);

// Page B
window.addEventListener('message', this.receiveMessage, false);
receiveMessage = (event) => {
    console.log(event.data);
}