messageChannel的妙用

276 阅读1分钟

messageChannel

‌**MessageChannel****‌ 是一种在 JavaScript 中用于在不同执行上下文之间进行通信的机制。它创建了一个通信管道,包含两个端口:port1 和 port2。可以在一端通过一个端口发送消息,然后在另一端通过对应的端口接收消息。MessageChannel 以 DOM Event 的形式发送消息,属于浏览器宏任务(macro task)‌。

image.png

const { port1, port2 } = new MessageChannel();

妙用:

  1. 跨页面通信
  2. 深拷贝

跨页面通信

父子页面通信(iframe)

  • 在父页面中创建 MessageChannel,然后将其中一个端口传递给子页面。
  • 子页面通过接收到的端口与父页面进行通信。

深拷贝