MessageChannel

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨setembro de 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.

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.

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 ).