文章目录
- 一、问题
- 二、解决
- 2.1、子页面
- 2.2、主页面
- 三、知识点
- 3.1、[浏览器兼容性](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7)
- 3.2、详解
- 3.2.1、发送方
- 3.2.2、接收方
一、问题
如上所示，红框内是内嵌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() 方法向另一个窗口发送消息。该方法接收两个参数：
- 要发送的消息
- 目标窗口的源（例如，
"http://127.0.0.1:5500/child.html"或"*"）
3.2.2、接收方
在接收方中，使用 window.addEventListener() 方法监听 message 事件。该事件对象包含三个属性：
data表示接收到的数据origin表示发送方的源source表示发送方窗口的引用
