MessagePort

Channel Messaging API 的 MessagePort 接口代表 MessageChannel 的两个端口之一, 它可以让你从一个端口发送消息,并在消息到达的另一个端口监听它们。

Note: 此特性在 Web Worker 中可用

方法

继承自父类 EventTarget 的方法

MessagePort.postMessage (en-US)
从端口发送一条消息,并且可选是否将对象的所有权交给其他浏览器上下文。
MessagePort.start (en-US)
开始发送该端口中的消息队列 (只有使用 EventTarget.addEventListener 的时候才需要调用;当使用 MessagePort.onmessage 时,是默认开始的。)
MessagePort.close (en-US)
断开端口连接,它将不再是激活状态。

事件回调

继承自父类 EventTarget 的事件回调

MessagePort.onmessage
是一个 EventListener, 当类型为 message 的 MessageEvent 在该端口触发时,它将会被调用──也就是说,该端口收到了一条消息。
onmessageerror (en-US)
是一个 EventListener, 当类型为 MessageError 的 MessageEvent 被触发时,它将会被调用──这意味着,端口收到了一条无法被反序列化的消息。

事件

message (en-US)
当 MessagePort 对象收到消息时会触发。
也可以通过 onmessage 属性使用。
messageerror (en-US)
当 MessagePort 对象收到无法被反序列化的消息时触发。
也可以通过 onmessageerror (en-US) 属性使用。

例子

在下面的例子中,你可以看到一个使用 MessageChannel() 构造函数创建出的新 channel. 

当 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() {
  // 监听 port1 的事件
  channel.port1.onmessage = onMessage;

  // 把 port2 传给 iframe
  iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}


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

要查看可运行的完整示例,参考我们在 Github 上的 channel messaging basic demo (也可以在线运行).

规范

Specification Status Comment
HTML Living Standard
MessagePort
Living Standard No difference from Unknown.
Unknown
MessagePort
Unknown W3C version of the spec

浏览器兼容性

BCD tables only load in the browser

参见