MessagePort
Channel Messaging API 的 MessagePort
接口代表 MessageChannel
的两个端口之一,它可以让你从一个端口发送消息,并在消息到达的另一个端口监听它们。
备注: 此特性在 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