MessageChannel

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

A interface MessageChannel da API Channel Messaging nos permite criar um novo canal de mensagem e enviar os dados através de suas duas propriedades MessagePort.

Nota: This feature is available in Web Workers.

Propriedades

MessageChannel.port1 Somente leitura

Retorna port1 do canal.

MessageChannel.port2 Somente leitura

Retorna port2 do canal.

Construtor

MessageChannel()

Retorna um novo objeto MessageChannel com dois novos objetos MessagePort.

Exemplo

No seguinte bloco de codigo, você pode ver um novo canal sendo criado usando o construtor MessageChannel(). Quando o <iframe> tiver carregado, nos passamos o MessageChannel.port2 para o <iframe> usando MessagePort.postMessage juntamente com uma mensagem. O manipulador handleMessage então reponde à mensagem que foi enviada de volta do <iframe> (using MessagePort.onmessage), colocando-o em um parágrafo.

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

Para um exemplo completo, veja nosso channel messaging basic demo no Github (rode online também ).

Especificações

Specification
HTML
# message-channels

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
MessageChannel
MessageChannel() constructor
port1
port2

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Veja também