diff options
Diffstat (limited to 'files/pt-br/web/api/messageport/index.html')
| -rw-r--r-- | files/pt-br/web/api/messageport/index.html | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/files/pt-br/web/api/messageport/index.html b/files/pt-br/web/api/messageport/index.html new file mode 100644 index 0000000000..ae82cc0a79 --- /dev/null +++ b/files/pt-br/web/api/messageport/index.html @@ -0,0 +1,117 @@ +--- +title: MessagePort +slug: Web/API/MessagePort +tags: + - API + - Channel messaging + - HTML5 + - Interface + - MessagePort + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/MessagePort +--- +<p>{{APIRef("HTML DOM")}}</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 messages to be sent from one port and listening out for them arriving at the other.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}</em></p> + +<dl> + <dt>{{domxref("MessagePort.postMessage","postMessage()")}}</dt> + <dd>Sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts.</dd> + <dt>{{domxref("MessagePort.start","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("MessagePort.onmessage")}}.)</dd> + <dt>{{domxref("MessagePort.close","close()")}}</dt> + <dd>Disconnects the port, so it is no longer active.</dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p><em>Inherits event handlers from its parent, {{domxref("EventTarget")}}</em></p> + +<dl> + <dt>{{domxref("MessagePort.onmessage","onmessage")}}</dt> + <dd>An {{domxref("EventListener")}} called when {{domxref("MessageEvent")}} of type <code>message</code> is fired on the port—that is, when the port receives a message.</dd> + <dt>{{domxref("MessagePort.onmessageerror","onmessageerror")}}</dt> + <dd>An {{domxref("EventListener")}} called when a {{domxref("MessageEvent")}} of type {{domxref("MessageError")}} is fired—that is, when it receives a message that cannot be deserialized.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt>{{domxref("MessagePort.message_event","message")}}</dt> + <dd>Fired when a <code>MessagePort</code> object receives a message.<br> + Also available via the {{domxref("MessagePort.onmessage","onmessage")}} property.</dd> + <dt>{{domxref("MessagePort.messageerror_event","messageerror")}}</dt> + <dd>Fired when a <code>MessagePort</code> object receives a message that can't be deserialized.<br> + Also available via the {{domxref("MessagePort.onmessageerror","onmessageerror")}} property.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>In the following example, you can see a new channel being created using the {{domxref("MessageChannel.MessageChannel","MessageChannel()")}} constructor.</p> + +<p>When the IFrame has loaded, we register an {{domxref("MessagePort.onmessage","onmessage")}} handler for {{domxref("MessageChannel.port1")}} and transfer {{domxref("MessageChannel.port2")}} to the IFrame using the {{domxref("window.postMessage")}} method along with a message.</p> + +<p>When a message is received back from the IFrame, the <code>onMessage</code> function simply outputs the message to a paragraph.</p> + +<pre>var channel = new MessageChannel(); +var output = document.querySelector('.output'); +var iframe = document.querySelector('iframe'); + +// Wait for the iframe to load +iframe.addEventListener("load", onLoad); + +function onLoad() { + // Listen for messages on port1 + channel.port1.onmessage = onMessage; + + // Transfer port2 to the iframe + iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]); +} + + +// Handle messages received on port1 +function onMessage(e) { + output.innerHTML = e.data; +} +</pre> + +<p>For a full working example, see our <a class="external external-icon" href="https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic">channel messaging basic demo</a> on Github (<a class="external external-icon" href="https://mdn.github.io/dom-examples/channel-messaging-basic/">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', 'web-messaging.html#message-ports','Message ports')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.MessagePort")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> +</ul> |