Revision 733897 of MessagePort

<p>{{ APIRef() }}</p>

<p>The <strong><code>MessagePort</code></strong> interface of the <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> represents one of the two ports of a {{domxref("MessageChannel")}}, allowing sending of messages from one port and listening out for them arriving at the other.</p>

<h2 id="Properties">Methods</h2>

<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}</em></p>

<dl>
 <dt>{{domxref("MessageChannel.postMessage")}}</dt>
 <dd>Sends a message from the port, and optionlly, transfers ownership of objects to other browsing contexts.</dd>
 <dt>{{domxref("MessageChannel.start")}}</dt>
 <dd>Starts the sending of messages queued on the port (only needed when using {{domxref("EventTarget.addEventListener")}}; it is implied when using {{domxref("MessageChannel.onmessage")}}.)</dd>
 <dt>{{domxref("MessageChannel.close")}}</dt>
 <dd>Disconnects the port, so it is no longer active.</dd>
</dl>

<h2 id="Properties">Event handlers</h2>

<p><em>Inherits event handlers from its parent, {{domxref("EventTarget")}}</em></p>

<dl>
 <dt>{{domxref("MessageChannel.onmessage")}}</dt>
 <dd>Is an {{ domxref("EventListener") }} that is called whenever an {{domxref("MessageEvent")}} of type <code>message</code> is fired on the port — that is, when the port receives a message.</dd>
</dl>

<h2 id="Example">Example</h2>

<p>In the following code block, you can see a new channel being created using the {{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} constructor. When the IFrame has loaded, we transfer {{domxref("MessageChannel.port2")}} (a <code>MessagePort</code>) to the IFrame using {{domxref("MessagePort.postMessage")}} along with a message. The <code>handleMessage</code> handler then responds to a message being sent back from the IFrame (using {{domxref("MessagePort.onmessage")}}), putting it into a paragraph.</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>For a full working example, see our <a class="external external-icon" href="https://github.com/mdn/channel-messaging-basic-demo">channel messaging basic demo</a> on Github (<a class="external external-icon" href="https://mdn.github.io/channel-messaging-basic-demo/">run it live too</a>).</p>

<h2 id="Specifications">Specifications</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', '#message-ports','MessagePort')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No difference from {{SpecName("HTML5 Web Messaging")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 Web Messaging', '#message-ports','MessagePort')}}</td>
   <td>{{Spec2('HTML5 Web Messaging')}}</td>
   <td>W3C version of the spec</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</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>{{CompatNo}}</td>
   <td>10.0</td>
   <td>10.6</td>
   <td>5</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome Mobile</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>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>10.0</td>
   <td>11.5</td>
   <td>5.1</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Compatibility_notes">Compatibility notes</h3>

<p>Channel messaging support for Firefox is close; {{domxref("MessagePort")}} is already being used in <a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage#Shared_workers">shared workers</a>. See {{Bug("952139")}} for progress.</p>

<h2 id="See_also">See also</h2>

<ul>
</ul>

<p><a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></p>