Channel Messaging API - Web 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 数组，一种同时向多个端口广播消息的实验性解决方案。

例子

• 我们在 Github 上发布了 channel messaging basic demo，在这里直接尝试。这个例子展示了一次页面和嵌入 <iframe> 间的真实而简易的消息传递。
• 你也可以参考 多个消息 demo (在线演示)。这个例子展示了稍微复杂些的设置，可以在主页面和 IFrame 之间传递多条消息。

规格

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

浏览器兼容性

MessageChannel

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

MessagePort

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参考

• Using channel messaging
• Web Workers API
• Broadcast Channel API