MessagePort

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

Note: 此特性在 Web Worker 中可用。

方法

继承自父类 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 (也可以在线运行).

规范

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
MessagePortChrome Full support 4Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support YesOpera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
closeChrome Full support 4Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android No support NoOpera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
message eventChrome Full support 4Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android No support NoOpera Android Full support 11.5Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
messageerror eventChrome Full support 60Edge Full support 18Firefox Full support 57IE ? Opera Full support 47Safari ? WebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 57Opera Android Full support 47Safari iOS ? Samsung Internet Android Full support 8.0
onmessageChrome Full support 4Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android No support NoOpera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
onmessageerrorChrome Full support 60Edge Full support 18Firefox Full support 57IE No support NoOpera Full support 47Safari ? WebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 57Opera Android Full support 44Safari iOS ? Samsung Internet Android Full support 8.0
postMessageChrome Full support 4Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android No support NoOpera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
startChrome Full support 4Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android No support NoOpera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
Available in workersChrome Full support YesEdge Full support 12Firefox Full support 41IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 41Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

参见