diff options
Diffstat (limited to 'files/zh-cn/web/api/broadcastchannel/message_event/index.html')
| -rw-r--r-- | files/zh-cn/web/api/broadcastchannel/message_event/index.html | 168 |
1 files changed, 168 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/broadcastchannel/message_event/index.html b/files/zh-cn/web/api/broadcastchannel/message_event/index.html new file mode 100644 index 0000000000..9b89d2bd63 --- /dev/null +++ b/files/zh-cn/web/api/broadcastchannel/message_event/index.html @@ -0,0 +1,168 @@ +--- +title: 'BroadcastChannel: message event' +slug: Web/API/BroadcastChannel/message_event +tags: + - 事件 + - 消息 + - 通信 +translation_of: Web/API/BroadcastChannel/message_event +original_slug: Web/Events/message +--- +<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> |