iframe内部子页面与外部主页面通讯

一、问题

如上所示，红框内是内嵌iframe的网站。点击同意或拒绝后，需要通知iframe外的网站处理对应响应，这就是本篇文章需要解决的问题

二、解决

2.1、子页面

子页面发起通讯，可以设置传参，代码如下：

window.parent.postMessage({
    type: 'success',
    message: '成功'
}, "*")

2.2、主页面

主页面初始化时通过window.addEventListener，监听message，在回调中处理发送过来的响应或者处理相关参数，代码如下：

const fun = (e) => {
    // e.data为子页面发送的数据
    console.log('message', e.data); // { type: 'success', message: '成功' }
}
// 页面启动监听
window.addEventListener('message', fun, false);
// 页面卸载时需要销毁监听
window.removeEventListener('message', fun);

三、知识点

3.1、浏览器兼容性

3.2、详解

安全、可靠且支持跨域的 iframe 通信方式，它可以在两个窗口之间异步传递消息。

3.2.1、发送方

在发送方中，使用 window.postMessage() 方法向另一个窗口发送消息。该方法接收两个参数：

1. 要发送的消息
2. 目标窗口的源（例如，"http://127.0.0.1:5500/child.html" 或 "*"）

3.2.2、接收方

在接收方中，使用 window.addEventListener() 方法监听 message 事件。该事件对象包含三个属性：

1. data 表示接收到的数据
2. origin 表示发送方的源
3. source 表示发送方窗口的引用