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域名);

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);
}

参考：https://blog.csdn.net/weixin_42420703/article/details/98229993