diff options
Diffstat (limited to 'files/zh-cn/web/events/message/index.html')
| -rw-r--r-- | files/zh-cn/web/events/message/index.html | 167 |
1 files changed, 0 insertions, 167 deletions
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 ---- -<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"><iframe></a></code> 作为发送者，当用户点击按钮之后，会广播 <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code> 中的内容。同时，有两个 <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code> 作为接收者，会监听广播的消息，并将结果写入 <code><a href="/en-US/docs/Web/HTML/Element/div"><div></a></code> 元素。</p> - -<h4 id="发送者">发送者</h4> - -<div class="hidden"> -<pre class="brush: html"><h1>发送者</h1> -<label for="message">输入要广播的信息：</label><br/> -<textarea id="message" name="message" rows="1" cols="40">Hello</textarea> -<button id="broadcast-message" type="button">开始广播</button></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', () => { - channel.postMessage(messageControl.value); -}) -</pre> - -<h4 id="接收者_1">接收者 1</h4> - -<div class="hidden"> -<pre class="brush: html"><h1>接收者 1</h1> -<div id="received"></div></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) => { - received.textContent = event.data; -});</pre> - -<h4 id="接收者_2">接收者 2</h4> - -<div class="hidden"> -<pre class="brush: html"><h1>接收者 2</h1> -<div id="received"></div></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) => { - 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> |