MessagePort - 表示 MessageChannel 的两个端口中的一个

MessagePort 是通道消息 API 的接口，表示 MessageChannel 的两个端口中的一个，允许从一个端口发送消息，并监听它们到达另一个端口的情况。

方法

从它的父接口 EventTarget 继承了方法。

postMessage()

从端口发送一个消息，并且可选地，传送对象其他浏览上下文的所有权。

start()

开始发送在端口上排队的消息（仅在使用 EventTarget.addEventListener 时需要调用；使用 MessagePort.onmessage 则不用）。

close()

断开端口，因此它不再有效。

事件处理程序

从它的父接口 EventTarget 继承了事件处理程序。

onmessage

当在端口上触发 message 类型的 MessageEvent 时，即端口接收到消息时，调用的 EventListener。

onmessageerror

当触发 MessageError 类型的 MessageEvent 时（即当它接收到无法反序列化的消息时）调用的 EventListener。

事件

message

当 MessagePort 对象接收到消息时触发。
也可通过 onmessage 属性设置。

messageerror

当 MessagePort 对象接收不能被反序列化消息时触发。
也可通过 onmessageerror 属性设置。

实例

在下面的例子中，可以看到使用 MessageChannel() 的构造方法创建新的通道。

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

从 IFrame 收到消息后，onMessage 函数仅将消息输出到段落。

var channel = new MessageChannel();
var output = document.querySelector('.output');
var iframe = document.querySelector('iframe');

// 等待 iframe 加载
iframe.addEventListener("load", onLoad);

function onLoad() {
  // 监听端口 1 消息
  channel.port1.onmessage = onMessage;

  // 将端口 2 传送到 iframe
  iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}

// 处理端口 1 收到的消息
function onMessage(e) {
  output.innerHTML = e.data;
}

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

规范

规范	状态	备注
HTML Living Standard Message ports 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 使用通道消息