MessagePort - Web API 接口参考 编辑

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

方法

继承自父类 EventTarget 的方法

MessagePort.postMessage

从端口发送一条消息，并且可选是否将对象的所有权交给其他浏览器上下文。

MessagePort.start

开始发送该端口中的消息队列 (只有使用 EventTarget.addEventListener 的时候才需要调用；当使用 MessagePort.onmessage 时，是默认开始的。)

MessagePort.close

断开端口连接，它将不再是激活状态。

事件回调

继承自父类 EventTarget 的事件回调

MessagePort.onmessage

是一个 EventListener, 当类型为 message 的 MessageEvent 在该端口触发时，它将会被调用──也就是说，该端口收到了一条消息。

onmessageerror

是一个 EventListener, 当类型为 MessageError 的 MessageEvent 被触发时，它将会被调用──这意味着，端口收到了一条无法被反序列化的消息。

事件

message

当 MessagePort 对象收到消息时会触发。
也可以通过 onmessage 属性使用。

messageerror

当 MessagePort 对象收到无法被反序列化的消息时触发。
也可以通过 onmessageerror 属性使用。

例子

在下面的例子中，你可以看到一个使用 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 (也可以在线运行).

规范

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• 使用 channel messaging