From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- files/zh-cn/web/events/message/index.html | 167 ------------------------------ 1 file changed, 167 deletions(-) delete mode 100644 files/zh-cn/web/events/message/index.html (limited to 'files/zh-cn/web/events/message/index.html') diff --git a/files/zh-cn/web/events/message/index.html b/files/zh-cn/web/events/message/index.html deleted file mode 100644 index ccbd2d9859..0000000000 --- a/files/zh-cn/web/events/message/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: 'BroadcastChannel: message event' -slug: Web/Events/message -tags: - - 事件 - - 消息 - - 通信 -translation_of: Web/API/BroadcastChannel/message_event ---- -
{{APIRef}}
- -

当频道收到一条消息时,会在关联的 {{domxref('BroadcastChannel')}} 对象上触发 message 事件。

- - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("MessageEvent")}}
Event handler propertyonmessage
- -

示例

- -

实时示例

- -

在这个例子中,有一个 <iframe> 作为发送者,当用户点击按钮之后,会广播 <textarea> 中的内容。同时,有两个 <iframe> 作为接收者,会监听广播的消息,并将结果写入 <div> 元素。

- -

发送者

- - - -
const channel = new BroadcastChannel('example-channel');
-const messageControl = document.querySelector('#message');
-const broadcastMessageButton = document.querySelector('#broadcast-message');
-
-broadcastMessageButton.addEventListener('click', () => {
-    channel.postMessage(messageControl.value);
-})
-
- -

接收者 1

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

接收者 2

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

结果

- -

{{ EmbedLiveSample('发送者', '100%', '170px','' ,'' , 'dummy') }}

- -

{{ EmbedLiveSample('接收者_1', '100%', '150px','' ,'' , 'dummy') }}

- -

{{ EmbedLiveSample('接收者_2', '100%', '150px','' ,'' , 'dummy') }}

- -

规范

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

浏览器兼容性

- - - -

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

- -

相关信息

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