Channel Messaging API

Channel Messaging API 允许两个不同的脚本运行在同一个文档的不同浏览器上下文(比如两个 iframe,或者文档主体和一个 iframe,使用 SharedWorker 的两个文档,或者两个 worker)来直接通讯,在每端使用一个端口(port)通过双向频道(channel)向彼此传递消息。

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

Channel 通信的概念和用法

使用 MessageChannel() 构造函数来创建通讯信道。一旦创建,信道的两个端口即可通过 MessageChannel.port1 和 MessageChannel.port2 属性进行访问(都会返回 MessagePort  对象)。创建信道的应用程序使用 port1,在另一端的程序使用 port2 —— 你向 port2 发送信息,然后携带 2 个参数(需要传递的消息,要传递所有权的对象,在这里是 port 自身)调用 window.postMessage 方法将端口信息传递到另一个浏览器上下文。

当这些可传递的对象被传递后,他们就从之前所属的上下文中消失了。比如一个 port,一旦被发送,在原本的上下文中就再也不可用了。注意当前仅有 ArrayBuffer 和 MessagePort 对象可以被发送。

另一个浏览器上下文可以使用 MessagePort.onmessage 监听信息,并使用事件的 data 属性获取消息内容。你可以通过 MessagePort.postMessage 向原来的文档发送应答消息。

当你想要停止通过信道发送消息时,你可以调用来关闭 MessagePort.close 端口。

更多使用这个 API 的资料参见:Using channel messaging 。

Channel 通信接口

MessageChannel
创建一个新的发送消息的信道。
MessagePort
控制消息信道的端口,允许从一个端口发送消息,并监听另一端消息的到来。
PortCollection
MessagePort 数组,一种同时向多个端口广播消息的实验性解决方案。

例子

规格

规格 状态 补充
HTML Living Standard
Channel messaging
Living Standard  

浏览器兼容性

MessageChannel

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
MessageChannelChrome Full support 4Edge Full support YesFirefox Full support 41IE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 41Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support Yes

Legend

Full support  
Full support

MessagePort

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
MessagePortChrome Full support 4Edge Full support YesFirefox 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 Yes

Legend

Full support  
Full support

参考