HTML5 PostMessage resolve soluções de transmissão de mensagens cruzadas e cruzadas e cruzadas

Geralmente, ao fazer o desenvolvimento da Web, existem vários problemas que geralmente são encontrados, além dos clientes e da transmissão do servidor.

1. Transmissão de dados de páginas e novas janelas abertas

2. Mensagens entre várias janelas

3.

4. Transmissão de dados cruzados dos três problemas acima

PostMessage ()

Esses problemas têm algumas soluções, mas a API da mensagem introduzida pelo HTML5 pode ser mais conveniente, eficaz e resolvida com segurança. O método PostMessage () permite que os scripts de diferentes fontes usem métodos assíncronos para comunicação limitada, que podem realizar arquivos cruzados -text, mensagens multi -lindo e cruzamento.

O método PostMessage (Data, Origin) aceita dois parâmetros

1. Dados: os dados a serem passados, a especificação HTML5 mencionou que o parâmetro pode ser qualquer tipo básico ou objeto replicável do JavaScript, mas nem todos os navegadores fizeram isso. Precisa usar o método JSON.Stringify () para serializar o parâmetro de objeto ao passar os parâmetros.

2.Beares: Indique a fonte da janela de destino, protocolo+número da porta [+URL], o URL será ignorado, para que você possa escrever. Faça apenas uma mensagem para a janela especificada. para/.

http://test.com/index.html

 <Div Style = Width: 200px; src = http://lslib.com/lslib.html> </frame> </div>

Podemos passar a mensagem para a página Cross -Domain iframe http: //lslib.html na cruz -Domain se http://test.com/index.html transmite mensagens

 Window.onload = function () {window.frames [0] .postMessage ('getColor', 'http://lslib.com');}

Recebendo mensagem

A página acima test.com enviou uma mensagem para lslib.com, portanto, como receber mensagens na página LSLIB.com e monitorar o evento de mensagem do evento de mensagem da Window.

http://lslib.com/lslib.html

 Window.adDeventListener ('mensagem', function (e) {if (e.source! = Window.parent) return; var color = container.style.backgroundcolor; window.parent. Pós -mansage (color, '*');}, FALSO;

Dessa forma, podemos receber a mensagem passada por qualquer janela.

Existem vários atributos importantes

1. Dados: Como o nome sugere, é a mensagem que é passada

2.Source: objeto de janela para enviar mensagens

3.Igin: fonte de envio de uma janela de mensagem (protocolo+host+número da porta)

Dessa forma, você pode receber mensagens cruzadas.

Demonstração simples

Neste exemplo, a div à esquerda mudará de acordo com a mudança de cor da div na direita à direita

 <! <div id = cor> cor da estrutura </div> </div> <div> <iframe id = filho src = http://lslib.com/lslib.html> </div> </div> <script type = Text/javascript> window.onload = function () {window.frames [0] .postMessage ('getColor', 'http://lslib.com');} window.addd EventListener ('mensagem', função (e) {var color = e.data;

 <! = Contêiner onclick = changeColor (); ); ;}, false); , 0) ';} else {color =' rgb (204,102,0) ';} container.style.backgroundcolor = color; com/lslib.html

Quando a página é carregada no exemplo, a página inicial envia a solicitação 'getColor' para iframe (os parâmetros não são práticos)

 Window.onload = function () {window.frames [0] .postMessage ('getColor', 'http://lslib.com');}

Iframe recebe a mensagem e envia a cor atual para a página principal

 Window.adDeventListener ('mensagem', function (e) {if (e.source! = Window.parent) return; var color = container.style.backgroundcolor; window.parent. Pós -mansage (color, '*');}, FALSO;

Receba mensagens na página inicial, mude sua própria cor div

 Window.addeventListener ('message', function (e) {var color = e.data; document.getElementById ('color'). Style.backgroundColor = color;);

Ao clicar no iframe acionar seu método de mudança de cor, envie a cor mais recente para a página principal

 function changeColor () {var color = container.style.backgroundcolor; Rgb (204.102,0) ';} contêiner.style.backgroundcolor = color;

A página inicial ainda usa o programa que acabou de ouvir o evento de mensagem para lidar com sua própria descoloração

 Window.addeventListener ('message', function (e) {var color = e.data; document.getElementById ('color'). Style.backgroundColor = color;);

afinal

O uso simples resolve o grande problema. A compatibilidade com o navegador tão chamado quase se tornou um problema que o IE começou. Essência Essência No entanto, a boa notícia é como o LocalStorage. também determinou se ele suporta addEventListener.

O acima é todo o conteúdo deste artigo.