MessageChannel：MessageChannel() 构造函数

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 2015 年 9 月以来，该特性已在各大浏览器中可用。

注意：此功能在 Web Workers 中可用。

MessageChannel 接口的 MessageChannel() 构造函数返回一个新的 MessageChannel 对象，该对象包含两个新的 MessagePort 对象。

在下面的代码块中，你可以看到使用 MessageChannel() 构造函数创建了一个新的通道。当 <iframe> 加载完成后，我们使用 MessagePort.postMessage 将 port2 和一条消息传递给 <iframe>。然后 handleMessage 处理器响应从 <iframe> 发回的消息（使用 onmessage），并将其放入一个段落中。port1 被监听以检查消息何时到达。

const channel = new MessageChannel();
const para = document.querySelector("p");

const ifr = document.querySelector("iframe");
const otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}

有关完整的工作示例，请参阅 GitHub 上的通道消息传递基本演示（也可以在线运行）。