From 135c317ada631767735d51bf184edf015b42ed03 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Fri, 13 Sep 2024 11:00:21 +0800 Subject: [PATCH] sync --- .../web/api/channel_messaging_api/index.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/files/zh-cn/web/api/channel_messaging_api/index.md b/files/zh-cn/web/api/channel_messaging_api/index.md index cfd349de7325bd..9c4179eaa5d25f 100644 --- a/files/zh-cn/web/api/channel_messaging_api/index.md +++ b/files/zh-cn/web/api/channel_messaging_api/index.md @@ -1,38 +1,38 @@ --- title: Channel Messaging API slug: Web/API/Channel_Messaging_API +l10n: + sourceCommit: 2c641e08878722bf29fb784d58c61873ce4a133a --- -{{DefaultAPISidebar("Channel Messaging API")}} +{{DefaultAPISidebar("Channel Messaging API")}} {{AvailableInWorkers}} **Channel Messaging API** 允许两个不同的脚本运行在同一个文档的不同浏览器上下文（比如两个 iframe，或者文档主体和一个 iframe，使用 {{domxref("SharedWorker")}} 的两个文档，或者两个 worker）来直接通讯，在每端使用一个端口（port）通过双向频道（channel）向彼此传递消息。 -{{AvailableInWorkers}} +## 概念和用法 -## Channel 通信的概念和用法 +使用 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} 构造函数创建消息频道。创建后，可以通过 {{domxref("MessageChannel.port1")}} 和 {{domxref("MessageChannel.port2")}} 属性访问频道的两个端口（这两个属性均返回 {{domxref("MessagePort")}} 对象）。创建频道的应用程序使用 `port1`，端口另一端的应用程序使用 `port2` — 您向 `port2` 发送消息，然后使用 {{domxref("window.postMessage")}} 以及两个参数（要发送的消息和要转移所有权的对象，在本例中为端口本身）将端口转移到另一个浏览上下文。 -使用 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} 构造函数来创建通讯信道。一旦创建，信道的两个端口即可通过 {{domxref("MessageChannel.port1")}} 和 {{domxref("MessageChannel.port2")}} 属性进行访问（都会返回 {{domxref("MessagePort")}} 对象）。创建信道的应用程序使用 `port1`，在另一端的程序使用 `port2`——你向 `port2` 发送信息，然后携带 2 个参数（需要传递的消息，要传递所有权的对象，在这里是 port 自身）调用 {{domxref("window.postMessage")}} 方法将端口信息传递到另一个浏览器上下文。 +使用 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} 构造函数来创建通讯频道。一旦创建，可以通过 {{domxref("MessageChannel.port1")}} 和 {{domxref("MessageChannel.port2")}} 属性访问频道的两个端口（这两个属性都会返回 {{domxref("MessagePort")}} 对象）。创建频道的应用程序使用 `port1`，在另一端的程序使用 `port2`——你向 `port2` 发送信息，然后携带 2 个参数（需要传递的消息，要传递所有权的对象，在这里是端口自身）调用 {{domxref("window.postMessage")}} 方法将端口传递到另一个浏览器上下文。 -当这些可传递的对象被传递后，他们就从之前所属的上下文中消失了。比如一个 port，一旦被发送，在原本的上下文中就再也不可用了。注意当前仅有 {{domxref("ArrayBuffer")}} 和 {{domxref("MessagePort")}} 对象可以被发送。 +当这些可传递的对象被传递后，他们就从之前所属的上下文中消失了。比如一个 port，一旦被发送，在原本的上下文中就再也不可用了。 -另一个浏览器上下文可以使用 {{domxref("MessagePort.onmessage")}} 监听信息，并使用事件的 `data` 属性获取消息内容。你可以通过 {{domxref("MessagePort.postMessage")}} 向原来的文档发送应答消息。 +另一个浏览器上下文可以使用 {{domxref("MessagePort.onmessage")}} 监听信息，并使用事件的 `data` 属性获取消息内容。你可以通过 {{domxref("MessagePort.postMessage")}} 将消息发送回原始文档进行响应。 -当你想要停止通过信道发送消息时，你可以调用来关闭 {{domxref("MessagePort.close")}} 端口。 +当你想要停止通过频道发送消息时，你可以调用 {{domxref("MessagePort.close")}} 来关闭端口。 -更多使用这个 API 的资料参见：[Using channel messaging](/zh-CN/docs/Web/API/Channel_Messaging_API/Using_channel_messaging) 。 +请参阅[使用频道消息传递](/zh-CN/docs/Web/API/Channel_Messaging_API/Using_channel_messaging)，了解有关如何使用此 API 的更多信息。 -## Channel 通信接口 +## 接口 - {{domxref("MessageChannel")}} - - : 创建一个新的发送消息的信道。 + - : 创建一个新的消息频道来发送消息。 - {{domxref("MessagePort")}} - - : 控制消息信道的端口，允许从一个端口发送消息，并监听另一端消息的到来。 -- {{domxref("PortCollection")}} - - : `MessagePort` 数组，一种同时向多个端口广播消息的实验性解决方案。 + - : 控制消息频道的端口，允许从一个端口发送消息，并监听到达另一个端口。 -## 例子 +## 示例 -- 我们在 Github 上发布了 [channel messaging 基本演示](https://github.com/mdn/dom-examples/tree/main/channel-messaging-basic)，在[这里](http://mdn.github.io/dom-examples/channel-messaging-basic/)直接尝试。这个例子展示了一次页面和嵌入 {{htmlelement("iframe")}} 间的真实而简易的消息传递。 +- 我们在 Github 上发布了[频道消息传递基本演示](https://github.com/mdn/dom-examples/tree/main/channel-messaging-basic)，在[这里](http://mdn.github.io/dom-examples/channel-messaging-basic/)直接尝试。这个例子展示了一次页面和嵌入 {{htmlelement("iframe")}} 间的非常简单的消息传递。 - 你也可以参考[多个消息演示](https://github.com/mdn/dom-examples/tree/main/channel-messaging-multimessage)（[在线演示](http://mdn.github.io/dom-examples/channel-messaging-multimessage/)）。这个例子展示了稍微复杂些的设置，可以在主页面和 IFrame 之间传递多条消息。 ## 规范 @@ -45,6 +45,6 @@ slug: Web/API/Channel_Messaging_API ## 参见 -- [Using channel messaging](/zh-CN/docs/Web/API/Channel_Messaging_API/Using_channel_messaging) +- [使用频道消息传递](/zh-CN/docs/Web/API/Channel_Messaging_API/Using_channel_messaging) - [Web Workers API](/zh-CN/docs/Web/API/Web_Workers_API) - [Broadcast Channel API](/zh-CN/docs/Web/API/Broadcast_Channel_API)