Channel Messaging API

备注: 此特性在 Web Worker 中可用。

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

概念和用法

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

当这些可转移的对象被传递后,它们就从之前所属的上下文中消失了。比如一个端口,一旦被发送,在原本的上下文中就再也不可用了。

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

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

请参阅使用频道传递消息,了解有关如何使用此 API 的更多信息。

接口

MessageChannel

创建一个新的消息频道来发送消息。

MessagePort

控制消息频道的端口,允许从一个端口发送消息,并监听到达另一个端口。

示例

规范

Specification
HTML
# channel-messaging

浏览器兼容性

api.MessageChannel

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
MessageChannel
MessageChannel() constructor
port1
port2

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

api.MessagePort

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
MessagePort
close
message event
messageerror event
postMessage
options.includeUserActivation parameter
Non-standard
start
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

参见