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
.
Note: 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 objetosMessagePort
.
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.
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
Especificações | Status | Comentário |
---|---|---|
HTML Living Standard The definition of 'Message channels' in that specification. |
Padrão em tempo real |
Compatibilidade entre os navegadores
Estamos convertendo nossos dados de compatibilidade para o formato JSON.
Esta tabela de compatibilidade ainda usa o formato antigo,
pois ainda não convertemos os dados que ela contém.
Descubra como você pode ajudar!
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Suporte Básico | 4 | (Yes) | 41 (41) | 10.0 | 10.6 | 5 |
Disponivel em workers | (Yes) | ? | 41 (41) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Suporte Básico | 4.4 | 4 | (Yes) | 41.0 (41) | (Yes) | 10.0 | 11.5 | 5.1 |
Disponivel em workers | (Yes) | (Yes) | ? | 41.0 (41) | (Yes) | (Yes) | (Yes) | (Yes) |