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
|
---
title: MessageChannel
slug: Web/API/MessageChannel
translation_of: Web/API/MessageChannel
---
<p>{{APIRef("HTML DOM")}}</p>
<p>A interface <strong><code>MessageChannel</code></strong> da <a href="/en-US/docs/Web/API/Channel_Messaging_API">API Channel Messaging</a> nos permite criar um novo canal de mensagem e enviar os dados através de suas duas propriedades {{domxref("MessagePort")}}.</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="Propriedades">Propriedades</h2>
<dl>
<dt>{{domxref("MessageChannel.port1")}} {{readonlyInline}}</dt>
<dd>Retorna port1 do canal.</dd>
<dt>{{domxref("MessageChannel.port2")}} {{readonlyInline}}</dt>
<dd>Retorna port2 do canal.</dd>
</dl>
<h2 id="Construtor">Construtor</h2>
<dl>
<dt>{{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}</dt>
<dd>
<p>Retorna um novo objeto <code>MessageChannel</code> com dois novos objetos {{domxref("MessagePort")}}.</p>
</dd>
</dl>
<h2 id="Exemplo">Exemplo</h2>
<p>No seguinte bloco de codigo, você pode ver um novo canal sendo criado usando o construtor {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}. Quando o {{HTMLElement("iframe")}} tiver carregado, nos passamos o {{domxref("MessageChannel.port2")}} para o {{HTMLElement("iframe")}} usando {{domxref("MessagePort.postMessage")}} juntamente com uma mensagem. O manipulador <code>handleMessage</code> então reponde à mensagem que foi enviada de volta do {{HTMLElement("iframe")}} (using {{domxref("MessagePort.onmessage")}}), colocando-o em um parágrafo.</p>
<pre class="brush: js">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>Para um exemplo completo, veja nosso <a class="external external-icon" href="https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic">channel messaging basic demo</a> no Github (<a class="external external-icon" href="https://mdn.github.io/dom-examples/channel-messaging-basic/">rode online também</a> ).</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', 'web-messaging.html#message-channels','Message channels')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_entre_os_navegadores">Compatibilidade entre os navegadores</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>Suporte Básico</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>Disponivel em 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>Suporte Básico</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>Disponivel em 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="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
</ul>
|
