父窗口与 iframe 之间的通信 #

1、iframe 向父窗口发送数据

window.parent.postMessage(message, "*");

message 也可以是 JSON 化的数据：

const message = JSON.stringify({
    message: 'Hello from iframe',
    date: Date.now(),
});
window.parent.postMessage(message, '*');

2、父窗口向 iframe（子窗口）发送数据

frameElement.contentWindow.postMessage(message, '*');

3、接收数据

可以通过监听 message 事件，接收数据：

window.addEventListener("message", function(e) {
    const data = e.data;

    // 打印接收到的数据
    console.log(data);
});

在前面的文章也介绍过 web workers 也是通过 postMessage 和 message 事件进行通信的，点击这里阅读 《Web Workers的简单介绍》。

（完）