王鹏飞

Blog

Tutorial

About

JavaScript

2022年11月29日

父窗口与 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的简单介绍》

(完)

留言(0


发表评论

邮箱地址不会被公开。*表示必填项