MessageChannel

Baseline 已广泛支持

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

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

MessageChannel 接口属于 Channel Messaging API,它允许我们创建一个新的消息通道,并通过它的两个 MessagePort 属性在其中发送数据。

构造函数

MessageChannel()

返回一个新的 MessageChannel 对象,其中包含两个新的 MessagePort 对象。

实例属性

MessageChannel.port1 只读

返回通道的 port1。

MessageChannel.port2 只读

返回通道的 port2。

示例

在下面的示例中,你可以看到使用 MessageChannel() 构造函数创建了一个新的通道。

当 IFrame 加载完成后,我们为 MessageChannel.port1 注册一个 onmessage 处理程序,并使用 window.postMessage 方法将 MessageChannel.port2 与一条消息一起传输到 IFrame。

当从 IFrame 接收到一条消息时,onMessage 函数会将消息输出到一个段落中。

js
const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;

  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "*", [
    channel.port2,
  ]);
}

// Handle messages received on port1
function onMessage(e) {
  output.innerHTML = e.data;
}

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

规范

规范
HTML
# message-channels

浏览器兼容性

另见