---
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>