initial commit

2 files changed, 198 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>
diff --git a/files/pt-br/web/api/messageport/postmessage/index.html b/files/pt-br/web/api/messageport/postmessage/index.html
new file mode 100644
index 0000000000..26e9ffbbc1
--- /dev/null
+++ b/files/pt-br/web/api/messageport/postmessage/index.html
@@ -0,0 +1,81 @@
+---
+title: MessagePort.postMessage()
+slug: Web/API/MessagePort/postMessage
+translation_of: Web/API/MessagePort/postMessage
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>O método <code><strong>postMessage()</strong></code> da interface {{domxref("MessagePort")}} envia uma mensagem da porta e opcionalmente transfere a propriedade do objeto para outros contexto de navegação.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">port.postMessage(message, transferList);</pre>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Vazio.</p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>message</dt>
+ <dd>A mensagem que você quer enviar atravéz do canal. Esta mensagem pode ser de qualquer tipo de dados basico. Multiplos items podem ser enviados com diferentestes tipos de dados como em um <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>.</dd>
+ <dt>transferList {{optional_inline}}</dt>
+ <dd>{{domxref("Transferable")}} objects to be transferred — these objects have their ownership transferred to the receiving browsing context, so are no longer usable by the sending browsing context.</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 pass {{domxref("MessageChannel.port2")}} to the IFrame using {{domxref("window.postMessage")}} along with a message. The <code>handleMessage</code> handler then responds to a message being sent back from the IFrame using <code>onmessage</code>, putting it into a paragraph — {{domxref("MessageChannel.port1")}} is listened to, to check when the message arrives.</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/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#dom-messageport-postmessage', 'postMessage()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.MessagePort.postMessage")}}</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>