Channel Messaging API
备注: 此特性在 Web Worker 中可用。
Channel Messaging API 允许两个运行在同一个文档的不同浏览上下文(比如两个 iframe,或者文档主体和一个 iframe,使用 SharedWorker
的两个文档,或者两个 worker)中的独立脚本直接进行通讯,在每端使用一个端口(port)通过双向频道(channel)或管道(pipe)向彼此传递消息。
概念和用法
使用 MessageChannel()
构造函数来创建消息频道。一旦创建,可以通过 MessageChannel.port1
和 MessageChannel.port2
属性访问频道的两个端口(这两个属性都会返回 MessagePort
对象)。创建频道的应用程序使用 port1
,在另一端的程序使用 port2
——你向 port2
发送信息,然后携带 2 个参数(需要传递的消息,要传递所有权的对象,在这种情况下是端口自身)调用 window.postMessage
方法将端口传递到另一个浏览器上下文。
当这些可转移的对象被传递后,它们就从之前所属的上下文中消失了。比如一个端口,一旦被发送,在原本的上下文中就再也不可用了。
另一个浏览器上下文可以使用 onmessage
监听信息,并使用事件的 data
属性获取消息内容。你可以通过 MessagePort.postMessage
将消息发送回原始文档进行响应。
当你想要停止通过频道发送消息时,你可以调用 MessagePort.close
来关闭端口。
请参阅使用频道传递消息,了解有关如何使用此 API 的更多信息。
接口
MessageChannel
-
创建一个新的消息频道来发送消息。
MessagePort
-
控制消息频道的端口,允许从一个端口发送消息,并监听到达另一个端口。
示例
- 我们在 Github 上发布了频道消息传递基本演示,在这里直接尝试。这个例子展示了一次页面和嵌入
<iframe>
间的非常简单的消息传递。 - 你也可以参考多个消息演示(在线演示)。这个例子展示了稍微复杂些的设置,可以在主页面和 IFrame 之间传递多条消息。
规范
Specification |
---|
HTML Standard # channel-messaging |
浏览器兼容性
api.MessageChannel
BCD tables only load in the browser
api.MessagePort
BCD tables only load in the browser