MessagePort

Baseline 已广泛支持

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

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

MessagePort 接口是 通道消息 API 的一部分,代表 MessageChannel 的两个端口之一,允许消息从一个端口发送,并在另一个端口接收。

MessagePort 是一个 可转移对象

EventTarget MessagePort

实例方法

继承自其父类 EventTarget 的方法。.

postMessage()

从端口发送消息,并可选择将对象的拥有权转移给其他浏览上下文。

start()

启动端口上排队的消息的发送(仅在使用 EventTarget.addEventListener 时需要;使用 onmessage 时则隐含了此操作)。

close()

断开端口连接,使其不再处于活动状态。

事件

继承其父级 EventTarget 的事件。.

message

MessagePort 对象收到消息时触发。

messageerror

MessagePort 对象收到一条无法反序列化的消息时触发。

示例

在以下示例中,您可以看到使用 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-ports

浏览器兼容性

另见