blob: 1c94f2e872e4fd191d5365076f0cc5a6e4a9fcfa (
plain)
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
|
---
title: Broadcast Channel API
slug: Web/API/Broadcast_Channel_API
translation_of: Web/API/Broadcast_Channel_API
---
<p>{{DefaultAPISidebar("Broadcast Channel API")}}</p>
<p><strong>Broadcast Channel API</strong> 可以实现同 {{glossary("origin", "源")}} 下浏览器不同窗口，Tab页，frame或者 iframe 下的 {{glossary("browsing context", "浏览器上下文")}} (通常是同一个网站下不同的页面)之间的简单通讯。</p>
<p>{{AvailableInWorkers}}</p>
<p>广播频道会被命名和绑定到指定的源。</p>
<p>通过创建一个监听某个频道下的 {{domxref("BroadcastChannel")}} 对象，你可以接收发送给该频道的所有消息。一个有意思的点是，你不需要再维护需要通信的 iframe 或 worker 的索引。它们可以通过构造 {{domxref("BroadcastChannel")}} 来简单地“订阅”特定频道，并在它们之间进行全双工（双向）通信。</p>
<p><img alt="The principle of the Broadcast Channel API" src="https://mdn.mozillademos.org/files/9945/BroadcastChannel.png" style="height: 448px; width: 784px;"></p>
<h2 id="Broadcast_Channel_接口">Broadcast Channel 接口</h2>
<h3 id="创建或加入某个频道">创建或加入某个频道</h3>
<p><code>BroadcastChannel</code> 接口非常简单。通过创建一个 {{domxref("BroadcastChannel")}} 对象，一个客户端就加入了某个指定的频道。只需要向 <a href="/zh-CN/docs/Web/API/BroadcastChannel/BroadcastChannel">构造函数</a> 传入一个参数：频道名称。如果这是首次连接到该广播频道，相应资源会自动被创建。</p>
<pre class="brush: js">// 连接到广播频道
var bc = new BroadcastChannel('test_channel');
</pre>
<h3 id="发送消息">发送消息</h3>
<p>现在发送消息就很简单了，只需要调用 BroadcastChannel 对象上的{{domxref("BroadcastChannel.postMessage", "postMessage()")}} 方法即可。该方法的参数可以是任意对象。最简单的例子就是发送 {{domxref("DOMString")}} 文本消息：</p>
<pre class="brush: js">// 发送简单消息的示例
bc.postMessage('This is a test message.');
</pre>
<p>不只是 {{domxref("DOMString")}}，任意类型的对象都可以被发送。此 API 不会将消息与任何的语义相关联，因此通道的参与者有必要知道预期的消息类型和消息的消费方式。</p>
<h3 id="接收消息">接收消息</h3>
<p>当消息被发送之后，所有连接到该频道的 {{domxref("BroadcastChannel")}} 对象上都会触发 {{event("message")}} 事件。该事件没有默认的行为，但是可以使用 {{domxref("BroadcastChannel.onmessage", "onmessage")}} 事件处理程序来定义一个函数来处理消息。</p>
<pre class="brush: js">// 简单示例，用于将事件打印到控制台
bc.onmessage = function (ev) { console.log(ev); }
</pre>
<h3 id="与频道断开连接">与频道断开连接</h3>
<p>通过调用 BroadcastChannel 对象的 {{domxref("BroadcastChannel.close", "close()")}} 方法，可以离开频道。这将断开该对象和其关联的频道之间的联系，并允许它被垃圾回收。</p>
<pre class="brush: js">// 断开频道连接
bc.close()
</pre>
<h2 id="总结">总结</h2>
<p>Broadcast Channel API 是一个非常简单的API，内部包含了跨上下文通讯的接口。它可用于检测同源网站环境中其他浏览器选项卡下的用户操作，例如当用户登录到帐户时。没有定义消息传输协议，故不同上下文中的不同文档需要自己实现它：规范没有对此提出协议或要求。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "comms.html#broadcasting-to-other-browsing-contexts", "The Broadcast Channel API")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.BroadcastChannel")}}</p>
<h2 id="另见">另见</h2>
<ul>
<li>接口实现：{{domxref("BroadcastChannel")}}。</li>
</ul>
|
