1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
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"><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>
|
