blob: 810f29d780c98f9fdeaf1e7c27a8942915fc8d9b (
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
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
|
---
title: MessageChannel.port1
slug: Web/API/MessageChannel/port1
translation_of: Web/API/MessageChannel/port1
---
<div>{{APIRef("HTML DOM")}}</div>
<p>{{domxref("MessageChannel")}} 的只读属性 <code><strong>port1 </strong>返回消息通道的第一个端口</code>, 此端口连接到源上下文通道。</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">channel.port1;</pre>
<h3 id="Value">Value</h3>
<p>一个 {{domxref("MessagePort")}} 对象, 通道的第一个端口，此端口连接到源上下文通道。</p>
<h2 id="示例">示例</h2>
<p>在以下代码块中，您可以看到使用 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}构造函数创建的新通道。当{{HTMLElement("iframe")}}加载完毕，我们使用{{domxref("MessagePort.postMessage")}}方法把一条消息和{{domxref("MessageChannel.port2")}}传递给{{HTMLElement("iframe")}}。handleMessage处理程序将会从<iframe>中（使用{{domxref("MessagePort.onmessage")}}监听事件）接收到信息，将数据其放入一个段落。handleMessage 方法关联到 port1用于监听收到的消息。</p>
<pre class="brush: js;highlight[13]">var channel = new MessageChannel();
var para = document.querySelector('p');
var ifr = document.querySelector('iframe');
var otherWindow = ifr.contentWindow;
ifr.addEventListener("load", iframeLoaded, false);
function iframeLoaded() {
otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}
channel.port1.onmessage = handleMessage;
function handleMessage(e) {
para.innerHTML = e.data;
}
</pre>
<p>一个完整的运行示例，可以在Github上查看 <a class="external external-icon" href="https://github.com/mdn/channel-messaging-basic-demo">channel messaging basic demo</a> (<a class="external external-icon" href="http://mdn.github.io/channel-messaging-basic-demo/">run it live too</a>).</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', '#dom-messagechannel-port1','port1')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>No difference from {{SpecName("HTML5 Web Messaging")}}.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 Web Messaging', '#dom-messagechannel-port1','port1')}}</td>
<td>{{Spec2('HTML5 Web Messaging')}}</td>
<td>W3C version of the spec</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>4</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(41)}}</td>
<td>10.0</td>
<td>10.6</td>
<td>5</td>
</tr>
<tr>
<td>Available in workers</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop(41)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>4.4</td>
<td>4</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile(41)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>10.0</td>
<td>11.5</td>
<td>5.1</td>
</tr>
<tr>
<td>Available in workers</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile(41)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="参考">参考</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
</ul>
|
