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
168
169
170
171
172
173
174
175
176
177
178
|
---
title: 使用 channel messaging
slug: Web/API/Channel_Messaging_API/Using_channel_messaging
tags:
- API
- Channel messaging
- HTML5
- MessageChannel
- MessagePort
- 指南
translation_of: Web/API/Channel_Messaging_API/Using_channel_messaging
original_slug: Web/API/Channel_Messaging_API/使用_channel_messaging
---
<p>{{DefaultAPISidebar("Channel Messaging API")}}</p>
<p><span class="seoSummary"><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> 可以让运行在不同浏览器上下文中的独立脚本，连接到同一份文档（比如：两个 IFrame, 或者主文档和一个 IFrame, 或者使用同一个 {{domxref("SharedWorker")}} 的两份文档），并直接通信，通过每端一个 port 的双向频道（或管道）在两者之间传递消息。</span></p>
<p>在文本中，我们将探索这项技术的基本用法。</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="用例">用例</h2>
<p>Channel messaging 在这样的场景中特别有用：假如你有一个社交站点，它在主界面中通过 IFrame 内嵌了来自其他站点的内容，比如游戏，通讯录或者一个音乐播放器，有着个性化的音乐选择。当这些内容作为独立的单元时，一切都是 OK 的，但是当你想在主站点和 IFrame, 或者在不同的 IFrame 中交互时，困难就出现了。举例来说，假如你想从主站点向通讯录里添加一个联系人；或者想从游戏里，把最高分加入到个人资料；又或者，希望从音频播放器里，添加新的背景音乐到游戏中？因为浏览器使用的安全模型，使用传统的 web 技术来做这些事并不容易。你必须去考虑不同的源之间彼此是否信任，以及如何传递消息。</p>
<p>换个角度说，Message Channels 可以提供一个安全的通道让你在不同的浏览器上下文间传递数据。</p>
<div class="note">
<p><strong>提示</strong>: 要了解更多信息和思考，规范的 <a href="https://html.spec.whatwg.org/multipage/comms.html#ports-as-the-basis-of-an-object-capability-model-on-the-web">Ports 作为 Web 上一个对象兼容模型的基础</a> 章节值得一读。</p>
</div>
<h2 id="简单的例子">简单的例子</h2>
<p>为了帮助你开始，我们在 Github 上传了一些 demo. 一开始可以先看我们的 <a href="https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic">channel messaging 基本示例</a> (<a href="https://mdn.github.io/dom-examples/channel-messaging-basic/">也可以在线运行</a>)，它展示了一个非常简单的消息传递，发生在页面和内嵌 {{htmlelement("iframe")}} 之间。 </p>
<p>然后，看看我们的 <a href="https://github.com/mdn/dom-examples/tree/master/channel-messaging-multimessage">multimessaging demo</a> (<a href="https://mdn.github.io/dom-examples/channel-messaging-multimessage/">在线运行</a>)，它展示了一个稍微复杂一点的例子，可以在主页面和 IFrame 之间发送多条消息。</p>
<p>本文中，我们重点说后面的这个例子。它看起来像是这样：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10075/channel-messaging-demo.png" style="display: block; height: 744px; margin: 0px auto; width: 690px;"></p>
<h2 id="创建_channel">创建 channel</h2>
<p>在例子的主页面，我们有一个简单的表单，内含一个文本输入框，用来输入要发送到 {{htmlelement("iframe")}} 的消息。我们还有一个段落，我们在稍后将会用它来显示 {{htmlelement("iframe")}} 回传回来的确认消息。</p>
<pre class="brush: js notranslate">var input = document.getElementById('message-input');
var output = document.getElementById('message-output');
var button = document.querySelector('button');
var iframe = document.querySelector('iframe');
var channel = new MessageChannel();
var port1 = channel.port1;
// 等待 iframe 加载
iframe.addEventListener("load", onLoad);
function onLoad() {
// 监听按钮点击
button.addEventListener('click', onClick);
// 在 port1 监听消息
port1.onmessage = onMessage;
// 把 port2 传给 iframe
iframe.contentWindow.postMessage('init', '*', [channel.port2]);
}
// 当按钮点击时，在 port1 上发送一个消息
function onClick(e) {
e.preventDefault();
port1.postMessage(input.value);
}
// 处理 port1 收到的消息
function onMessage(e) {
output.innerHTML = e.data;
input.value = '';
}</pre>
<p>我们从使用 {{domxref( "MessageChannel.MessageChannel","MessageChannel()")}} 构造函数创建了一个 message channel 开始。</p>
<p>当 IFrame 加载完成，我们在按钮上注册了<code>onclick</code> 事件处理函数，在 {{domxref("MessageChannel.port1")}} 注册了 <code>onmessage</code> 事件处理函数。最后，我们使用 {{domxref("window.postMessage")}} 方法把 {{domxref("MessageChannel.port2")}} 传给 IFrame.</p>
<p>让我们来了解一下 <code>iframe.contentWindow.postMessage</code> 更多的工作细节。它接受三个参数：</p>
<ol>
<li>被发送的消息。对于一开始的 port 传递，这个消息可以是个空字符串，但是在例子里，我们传了 <code>'init'</code>.</li>
<li>消息将被发送到的源（origin）。 <code>*</code> 意思是 "任何源".</li>
<li>一个对象，它的所有权会被传给接受的浏览器上下文。在本例中，我们把 {{domxref("MessageChannel.port2")}} 传给了 IFrame, 然后它就可以用于与主页面通信了。</li>
</ol>
<p>当我们的按钮被点击时，我们阻止了默认的表单提交，然后把输入到输入框里的内容通过 {{domxref("MessageChannel")}} 发送给 IFrame.</p>
<h2 id="在_IFrame_里接收_port_和消息">在 IFrame 里接收 port 和消息</h2>
<p>在 IFrame 里，我们有下面的 JavaScript:</p>
<pre class="brush: js notranslate">var list = document.querySelector('ul');
var port2;
// 监听初始的 port 传递消息
window.addEventListener('message', initPort);
// 设置传过来的 port
function initPort(e) {
port2 = e.ports[0];
port2.onmessage = onMessage;
}
// 处理 port2 收到的消息
function onMessage(e) {
var listItem = document.createElement('li');
listItem.textContent = e.data;
list.appendChild(listItem);
port2.postMessage('Message received by IFrame: "' + e.data + '"');
}
</pre>
<p>当收到从主页面通过 {{domxref("window.postMessage")}} 方法传来的初始化消息时，我们运行 <code>initPort</code> 函数。它会保存传来的 port, 并且注册了一个 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">onmessage</span></font> 事件处理器，每当有消息通过我们的 {{domxref("MessageChannel")}} 传来时，它都会被调用。</p>
<p>当收到从主页面发来的消息时，我们创建一个列表项，并把它插入到这个无序列表中，然后把这个列表项的 {{domxref("Node.textContent","textContent")}} 设置为事件的 <code>data</code> 属性（里面包含真正的消息）。</p>
<p>然后，我们通过在初始化时传到 IFrame 的 {{domxref("MessageChannel.port2")}} 上调用 {{domxref("MessagePort.postMessage")}} 来使用 message channel 发送一个确认消息给主页面。</p>
<h2 id="在主页面中接收确认消息">在主页面中接收确认消息</h2>
<p>回到主页面，我们来一起看看 onmessage 事件处理函数。</p>
<pre class="brush: js notranslate">// 处理 port1 上收到的消息
function onMessage(e) {
output.innerHTML = e.data;
input.value = '';
}</pre>
<p>当收到从 IFrame 发来的确认消息，说明原始消息被成功接收时，它把确认消息输出到段落中，并清空输入框，为输入下一个要被发送的消息做准备。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', 'web-messaging.html#channel-messaging', 'Channel messaging')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<h3 id="MessageChannel"><code>MessageChannel</code></h3>
<div>
<p>{{Compat("api.MessageChannel", 0)}}</p>
<h3 id="MessagePort"><code>MessagePort</code></h3>
<div>
<p>{{Compat("api.MessagePort", 0)}}</p>
</div>
</div>
</div>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li>
<li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
<li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API</a></li>
</ul>
|
