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
当 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
HTML Standard
# message-ports

浏览器兼容性

BCD tables only load in the browser

参见