一、問題

如上所示，紅框內是內嵌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 表示發送方窗口的引用