From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 files/zh-cn/web/events/message/index.html | 167 ++++++++++++++++++++++++++++++
 1 file changed, 167 insertions(+)
 create mode 100644 files/zh-cn/web/events/message/index.html

(limited to 'files/zh-cn/web/events/message')

diff --git a/files/zh-cn/web/events/message/index.html b/files/zh-cn/web/events/message/index.html
new file mode 100644
index 0000000000..ccbd2d9859
--- /dev/null
+++ b/files/zh-cn/web/events/message/index.html
@@ -0,0 +1,167 @@
+---
+title: 'BroadcastChannel: message event'
+slug: Web/Events/message
+tags:
+  - 事件
+  - 消息
+  - 通信
+translation_of: Web/API/BroadcastChannel/message_event
+---
+<div>{{APIRef}}</div>
+
+<p>当频道收到一条消息时，会在关联的 {{domxref('BroadcastChannel')}} 对象上触发 <code>message</code> 事件。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MessageEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td><code><a href="/zh-CN/docs/Web/API/BroadcastChannel/onmessage">onmessage</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="实时示例">实时示例</h3>
+
+<p>在这个例子中，有一个 <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code> 作为发送者，当用户点击按钮之后，会广播 <code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code> 中的内容。同时，有两个 <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code> 作为接收者，会监听广播的消息，并将结果写入 <code><a href="/en-US/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> 元素。</p>
+
+<h4 id="发送者">发送者</h4>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;发送者&lt;/h1&gt;
+&lt;label for="message"&gt;输入要广播的信息：&lt;/label&gt;&lt;br/&gt;
+&lt;textarea id="message" name="message" rows="1" cols="40"&gt;Hello&lt;/textarea&gt;
+&lt;button id="broadcast-message" type="button"&gt;开始广播&lt;/button&gt;</pre>
+
+<pre class="brush: css">body {
+     border: 1px solid black;
+     padding: .5rem;
+     height: 150px;
+     font-family: "Fira Sans", sans-serif;
+}
+
+h1 {
+    font: 1.6em "Fira Sans", sans-serif;
+    margin-bottom: 1rem;
+}
+
+textarea {
+    padding: .2rem;
+}
+
+label, br {
+    margin: .5rem 0;
+}
+
+button {
+    vertical-align: top;
+    height: 1.5rem;
+}</pre>
+</div>
+
+<pre class="brush: js">const channel = new BroadcastChannel('example-channel');
+const messageControl = document.querySelector('#message');
+const broadcastMessageButton = document.querySelector('#broadcast-message');
+
+broadcastMessageButton.addEventListener('click', () =&gt; {
+    channel.postMessage(messageControl.value);
+})
+</pre>
+
+<h4 id="接收者_1">接收者 1</h4>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;接收者 1&lt;/h1&gt;
+&lt;div id="received"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">body {
+    border: 1px solid black;
+    padding: .5rem;
+    height: 100px;
+    font-family: "Fira Sans", sans-serif;
+}
+
+h1 {
+    font: 1.6em "Fira Sans",
+    sans-serif; margin-bottom: 1rem;
+}
+</pre>
+</div>
+
+<pre class="brush: js">const channel = new BroadcastChannel('example-channel');
+channel.addEventListener('message', (event) =&gt; {
+  received.textContent = event.data;
+});</pre>
+
+<h4 id="接收者_2">接收者 2</h4>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;接收者 2&lt;/h1&gt;
+&lt;div id="received"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">body {
+    border: 1px solid black;
+    padding: .5rem;
+    height: 100px;
+    font-family: "Fira Sans", sans-serif;
+}
+
+h1 {
+    font: 1.6em "Fira Sans", sans-serif;
+    margin-bottom: 1rem;
+}
+</pre>
+</div>
+
+<pre class="brush: js">const channel = new BroadcastChannel('example-channel');
+channel.addEventListener('message', (event) =&gt; {
+  received.textContent = event.data;
+});</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{ EmbedLiveSample('发送者', '100%', '170px','' ,'' , 'dummy') }}</p>
+
+<p>{{ EmbedLiveSample('接收者_1', '100%', '150px','' ,'' , 'dummy') }}</p>
+
+<p>{{ EmbedLiveSample('接收者_2', '100%', '150px','' ,'' , 'dummy') }}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-message')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel.message_event")}}</p>
+
+<h2 id="相关信息">相关信息</h2>
+
+<ul>
+ <li>相关事件：<code><a href="/docs/Web/API/BroadcastChannel/messageerror_event">messageerror</a></code></li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf