From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../broadcastchannel/broadcastchannel/index.html | 58 +++++++++++++ .../web/api/broadcastchannel/close/index.html | 55 +++++++++++++ files/zh-cn/web/api/broadcastchannel/index.html | 94 ++++++++++++++++++++++ .../broadcastchannel/messageerror_event/index.html | 83 +++++++++++++++++++ .../zh-cn/web/api/broadcastchannel/name/index.html | 57 +++++++++++++ .../web/api/broadcastchannel/onmessage/index.html | 55 +++++++++++++ .../api/broadcastchannel/onmessageerror/index.html | 45 +++++++++++ .../api/broadcastchannel/postmessage/index.html | 44 ++++++++++ 8 files changed, 491 insertions(+) create mode 100644 files/zh-cn/web/api/broadcastchannel/broadcastchannel/index.html create mode 100644 files/zh-cn/web/api/broadcastchannel/close/index.html create mode 100644 files/zh-cn/web/api/broadcastchannel/index.html create mode 100644 files/zh-cn/web/api/broadcastchannel/messageerror_event/index.html create mode 100644 files/zh-cn/web/api/broadcastchannel/name/index.html create mode 100644 files/zh-cn/web/api/broadcastchannel/onmessage/index.html create mode 100644 files/zh-cn/web/api/broadcastchannel/onmessageerror/index.html create mode 100644 files/zh-cn/web/api/broadcastchannel/postmessage/index.html (limited to 'files/zh-cn/web/api/broadcastchannel') diff --git a/files/zh-cn/web/api/broadcastchannel/broadcastchannel/index.html b/files/zh-cn/web/api/broadcastchannel/broadcastchannel/index.html new file mode 100644 index 0000000000..2eafc86263 --- /dev/null +++ b/files/zh-cn/web/api/broadcastchannel/broadcastchannel/index.html @@ -0,0 +1,58 @@ +--- +title: BroadcastChannel() +slug: Web/API/BroadcastChannel/BroadcastChannel +translation_of: Web/API/BroadcastChannel/BroadcastChannel +--- +

{{APIRef("BroadCastChannel API")}}

+ +

BroadcastChannel() 构建函数用于创建一个 {{domxref("BroadcastChannel")}} 对象，并与对应的频道相关联。

+ +

{{AvailableInWorkers}}

+ +

语法

+ +
 channel = new BroadcastChannel(channel);
+ +

值

+ +
+
channel
+
频道名称，类型为 {{domxref("DOMString")}}；在相同的 {{glossary("origin", "源")}} 下，一个名称只对应一个频道，所有 {{glossary("browsing context", "浏览器上下文")}} 共用。 
+
+ +

示例

+ +
// create a new channel listening to the "internal_notification" channel.
+
+var bc = new BroadcastChannel('internal_notification');
+bc.postMessage('New listening connected!');
+
+ +

规范

+ + + + + + + + + + + + + + +
规范示例备注
{{SpecName('HTML WHATWG', "comms.html#dom-broadcastchannel", "BroadcastChannel()")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.BroadcastChannel.BroadcastChannel")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/broadcastchannel/close/index.html b/files/zh-cn/web/api/broadcastchannel/close/index.html new file mode 100644 index 0000000000..e3eb201840 --- /dev/null +++ b/files/zh-cn/web/api/broadcastchannel/close/index.html @@ -0,0 +1,55 @@ +--- +title: BroadcastChannel.close() +slug: Web/API/BroadcastChannel/close +translation_of: Web/API/BroadcastChannel/close +--- +

{{APIRef("BroadCastChannel API")}}

+ +

通过调用 BroadcastChannel.close() 方法，可以马上断开其与对应频道的关联，并让其被垃圾回收。这是必要的步骤，因为浏览器没有其它方式知道频道不再被需要。

+ +

{{AvailableInWorkers}}

+ +

语法

+ +
var str = channel.close();
+
+ +

示例

+ +
// 连接到指定频道
+var bc = new BroadcastChannel('test_channel');
+
+// 其它操作 (如: postMessage, …)
+
+// 当完成后，断开与频道的连接
+bc.close();
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', "comms.html#dom-broadcastchannel-close", "BroadcastChannel.close()")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.BroadcastChannel.close")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/broadcastchannel/index.html b/files/zh-cn/web/api/broadcastchannel/index.html new file mode 100644 index 0000000000..7ba7c289ea --- /dev/null +++ b/files/zh-cn/web/api/broadcastchannel/index.html @@ -0,0 +1,94 @@ +--- +title: BroadcastChannel +slug: Web/API/BroadcastChannel +tags: + - API + - Broadcast Channel API + - Experimental + - HTML API + - Interface + - Reference + - TopicStub +translation_of: Web/API/BroadcastChannel +--- +

{{APIRef("Broadcast Channel API")}}

+ +

BroadcastChannel 接口代理了一个命名频道，可以让指定 {{glossary("origin")}} 下的任意 {{glossary("browsing context")}} 来订阅它。它允许同源的不同浏览器窗口，Tab页，frame或者 iframe 下的不同文档之间相互通信。通过触发一个 {{event("message")}} 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

+ +

{{AvailableInWorkers}}

+ +

构造函数

+ +
+
{{domxref("BroadcastChannel.BroadcastChannel", "BroadcastChannel()")}}
+
创建一个链接到命名频道的对象。
+
+ +

属性

+ +

该接口会从它的父级 {{domxref("EventTarget")}} 继承属性。

+ +
+
{{domxref("BroadcastChannel.name")}}
+
频道名称，返回 {{domxref("DOMString")}} 。
+
+

事件处理程序

+
+
{{domxref("BroadcastChannel.onmessage")}}
+
{{domxref("EventHandler")}} ，用于定义当该对象上触发了 {{event("message")}} 事件时要执行的函数。
+
{{domxref("BroadcastChannel.onmessageerror")}}
+
{{domxref("EventHandler")}} ，用于定义当该对象上触发了类型为 {{domxref("MessageError")}} 的 {{domxref("MessageEvent")}} 事件时要执行的函数。当接收到一条无法反序列化的消息时会触发此事件。
+
+ +

方法

+ +

该接口会从它的父级 {{domxref("EventTarget")}} 继承方法。

+ +

{{domxref("BroadcastChannel.postMessage()")}}

+ +
+
向所有监听了相同频道的 BroadcastChannel 对象发送一条消息，消息内容可以是任意类型的数据。 
+
{{domxref("BroadcastChannel.close()")}}
+
关闭频道对象，告诉它不要再接收新的消息，并允许它最终被垃圾回收。
+
+ +

事件

+ +
+
message
+
当频道收到一条消息时触发。
+ 也可以使用 onmessage 属性访问。
+
messageerror
+
当频道收到一条无法反序列化的消息时触发。
+ 也可以使用 onmessageerror 属性访问。
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', "comms.html#broadcastchannel", "BroadcastChannel")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.BroadcastChannel")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/broadcastchannel/messageerror_event/index.html b/files/zh-cn/web/api/broadcastchannel/messageerror_event/index.html new file mode 100644 index 0000000000..22b1a722f2 --- /dev/null +++ b/files/zh-cn/web/api/broadcastchannel/messageerror_event/index.html @@ -0,0 +1,83 @@ +--- +title: 'BroadcastChannel: messageerror event' +slug: Web/API/BroadcastChannel/messageerror_event +translation_of: Web/API/BroadcastChannel/messageerror_event +--- +
{{APIRef}}
+ +

当频道收到一条无法反序列化的消息时会在 {{domxref('BroadcastChannel')}} 对象上触发 messageerror 事件。

+ + + + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Interface{{domxref("MessageEvent")}}
Event handler propertyonmessageerror
+ +

示例

+ +

以下代码使用 addEventListener 来监听消息和错误：

+ +
const channel = new BroadcastChannel('example-channel');
+
+channel.addEventListener('message', (event) => {
+  received.textContent = event.data;
+});
+
+channel.addEventListener('messageerror', (event) => {
+  console.error(event);
+});
+ +

使用 onmessage 和 onmessageerror 事件处理程序来实现相同效果：

+ +
const channel = new BroadcastChannel('example-channel');
+
+channel.onmessage = (event) => {
+  received.textContent = event.data;
+};
+
+channel.onmessageerror = (event) => {
+  console.log(event);
+};
+
+ +

规范

+ + + + + + + + + + + + +
规范状态
{{SpecName('HTML WHATWG', 'indices.html#event-messageerror')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.BroadcastChannel.messageerror_event")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/broadcastchannel/name/index.html b/files/zh-cn/web/api/broadcastchannel/name/index.html new file mode 100644 index 0000000000..d6e21fd6e3 --- /dev/null +++ b/files/zh-cn/web/api/broadcastchannel/name/index.html @@ -0,0 +1,57 @@ +--- +title: BroadcastChannel.name +slug: Web/API/BroadcastChannel/name +translation_of: Web/API/BroadcastChannel/name +--- +

{{APIRef("BroadCastChannel API")}}

+ +

BroadcastChannel.name 是类型为 {{domxref("DOMString")}} 的只读属性，是频道的唯一标识。属性 name 是在创建时传入 {{domxref("BroadcastChannel.BroadCastChannel", "BroadcastChannel()")}} 构造函数的，所以是只读的。

+ +

{{AvailableInWorkers}}

+ +

语法

+ +
var str = channel.name;
+
+ +

示例

+ +
// 连接到指定频道
+var bc = new BroadcastChannel('test_channel');
+
+// 其它操作 (如: postMessage, …)
+
+// 在控制台打印频道名称
+console.log(bc.name); // "test_channel"
+
+// 当完成后，断开与频道的连接
+bc.close();
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', "comms.html#dom-broadcastchannel-name", "BroadcastChannel.name")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.BroadcastChannel.name")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/api/broadcastchannel/onmessage/index.html b/files/zh-cn/web/api/broadcastchannel/onmessage/index.html new file mode 100644 index 0000000000..ffea7d9825 --- /dev/null +++ b/files/zh-cn/web/api/broadcastchannel/onmessage/index.html @@ -0,0 +1,55 @@ +--- +title: BroadcastChannel.onmessage +slug: Web/API/BroadcastChannel/onmessage +translation_of: Web/API/BroadcastChannel/onmessage +--- +

{{APIRef("BroadCastChannel API")}}

+ +

当 {{domxref("BroadcastChannel")}} 接收到类型为 {{domxref("MessageEvent")}} 的 {{event("message")}} 事件时，BroadcastChannel.onmessage 属性可以指定一个函数，作为该事件对应的事件处理程序来执行。

+ +

{{AvailableInWorkers}}

+ +

语法

+ +
channel.onmessage = function;
+
+ +

值

+ + + +

示例

+ +
bc.onmessage = function(ev) { console.log('message event received!'); };
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', "comms.html#handler-broadcastchannel-onmessage", "BroadcastChannel.onmessage")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.BroadcastChannel.onmessage")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/broadcastchannel/onmessageerror/index.html b/files/zh-cn/web/api/broadcastchannel/onmessageerror/index.html new file mode 100644 index 0000000000..01c0e9ca2a --- /dev/null +++ b/files/zh-cn/web/api/broadcastchannel/onmessageerror/index.html @@ -0,0 +1,45 @@ +--- +title: BroadcastChannel.onmessageerror +slug: Web/API/BroadcastChannel/onmessageerror +translation_of: Web/API/BroadcastChannel/onmessageerror +--- +
{{APIRef("HTML DOM")}}
+ +

位于 {{domxref("BroadcastChannel")}} 接口上的 onmessageerror 事件处理程序，它是一个 {{domxref("EventListener", "事件监听器")}}。当  BroadcastChannel 接收到一条无法 {{glossary("Deserialization", "反序列化")}}的消息时，会触发类型为 {{domxref("MessageError")}} 的 {{domxref("MessageEvent")}} 事件，此时会执行该事件处理程序。

+ +

{{AvailableInWorkers}}

+ +

语法

+ +
bc.onmessageerror = function() { ... };
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', '#handler-broadcastchannel-onmessageerror', 'onmessageerror')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.BroadcastChannel.onmessageerror")}}

+
+ +

另见

+ + diff --git a/files/zh-cn/web/api/broadcastchannel/postmessage/index.html b/files/zh-cn/web/api/broadcastchannel/postmessage/index.html new file mode 100644 index 0000000000..374c611b34 --- /dev/null +++ b/files/zh-cn/web/api/broadcastchannel/postmessage/index.html @@ -0,0 +1,44 @@ +--- +title: BroadcastChannel.postMessage() +slug: Web/API/BroadcastChannel/postMessage +translation_of: Web/API/BroadcastChannel/postMessage +--- +

{{APIRef("BroadCastChannel API")}}

+ +

可以使用 BroadcastChannel.postMessage() 发送一条任意 {{jsxref("Object")}} 类型的消息，给所有同{{glossary("origin", "源")}}下监听了该频道的所有{{glossary("browsing context", "浏览器上下文")}}。消息以 {{event("message")}} 事件的形式发送给每一个绑定到该频道的广播频道。

+ +

{{AvailableInWorkers}}

+ +

语法

+ +
var str = channel.postMessage(object);
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', "comms.html#dom-broadcastchannel-postmessage", "BroadcastChannel.postmessage()")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.BroadcastChannel.postMessage")}}

+ +

另见

+ + -- cgit v1.2.3-54-g00ecf