From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/messageport/index.html | 117 +++++++++++++++++++++ .../web/api/messageport/postmessage/index.html | 81 ++++++++++++++ 2 files changed, 198 insertions(+) create mode 100644 files/pt-br/web/api/messageport/index.html create mode 100644 files/pt-br/web/api/messageport/postmessage/index.html (limited to 'files/pt-br/web/api/messageport') 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 +--- +

{{APIRef("HTML DOM")}}

+ +

The MessagePort interface of the Channel Messaging API 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.

+ +

{{AvailableInWorkers}}

+ +

Methods

+ +

Inherits methods from its parent, {{domxref("EventTarget")}}

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

Event handlers

+ +

Inherits event handlers from its parent, {{domxref("EventTarget")}}

+ +
+
{{domxref("MessagePort.onmessage","onmessage")}}
+
An {{domxref("EventListener")}} called when {{domxref("MessageEvent")}} of type message is fired on the port—that is, when the port receives a message.
+
{{domxref("MessagePort.onmessageerror","onmessageerror")}}
+
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.
+
+ +

Events

+ +
+
{{domxref("MessagePort.message_event","message")}}
+
Fired when a MessagePort object receives a message.
+ Also available via the {{domxref("MessagePort.onmessage","onmessage")}} property.
+
{{domxref("MessagePort.messageerror_event","messageerror")}}
+
Fired when a MessagePort object receives a message that can't be deserialized.
+ Also available via the {{domxref("MessagePort.onmessageerror","onmessageerror")}} property.
+
+ +

Example

+ +

In the following example, you can see a new channel being created using the {{domxref("MessageChannel.MessageChannel","MessageChannel()")}} constructor.

+ +

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.

+ +

When a message is received back from the IFrame, the onMessage function simply outputs the message to a paragraph.

+ +
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;
+}
+
+ +

For a full working example, see our channel messaging basic demo on Github (run it live too).

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'web-messaging.html#message-ports','Message ports')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.MessagePort")}}

+
+ +

See also

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

{{APIRef("HTML DOM")}}

+ +

O método postMessage() da interface {{domxref("MessagePort")}} envia uma mensagem da porta e opcionalmente transfere a propriedade do objeto para outros contexto de navegação.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
port.postMessage(message, transferList);
+ +

Returns

+ +

Vazio.

+ +

Parameters

+ +
+
message
+
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 Array.
+
transferList {{optional_inline}}
+
{{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.
+
+ +

Example

+ +

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 handleMessage handler then responds to a message being sent back from the IFrame using onmessage, putting it into a paragraph — {{domxref("MessageChannel.port1")}} is listened to, to check when the message arrives.

+ +
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;
+}
+ +

For a full working example, see our channel messaging basic demo on Github (run it live too).

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'web-messaging.html#dom-messageport-postmessage', 'postMessage()')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.MessagePort.postMessage")}}

+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf