Página Inicial>Tutorial de web design>Tutorial HTML

Para detalhes

Autor：Eve Cole Data da Última Atualização：2025-03-09 16:48:01

No artigo anterior, ele fala sobre a estratégia homóloga do navegador, ou seja, impedindo que os métodos e atributos um do outro acessem as páginas um do outro e expliquem a solução para a solução para os problemas cruzados das estratégias homólogas: sub -domina a agência , JSONP, JSONP, CORS. Este artigo explicará em detalhes o HTML5 Window.PostMessage.

Html5 window.postMessage API

Window.PostMessage HTML5 é uma API de mensagem segura e baseada em eventos.

Postmessage Enviar mensagem

O método PostMessage é chamado na janela de origem que precisa enviar uma mensagem para enviar uma mensagem.

Janela de origem

A janela de origem pode ser um objeto de janela global ou o seguinte tipo de janela:

Iframe na janela do documento:

 var iframe = document.getElementById ('my-iframe');

JavaScript Open Pop -up Janela:

 var win = window.open ();

A janela do pai da janela atual do documento:

 var win = window.parent;

Abra a janela do documento atual:

 var win = window.opner ();

Depois de encontrar o objeto da janela de origem, você pode chamar a API PostMessage para enviar uma mensagem para a janela de destino:

 `` Win.postMessage ('hello', 'ttp: //jhssdemo.duapp.com/'); `` `` `` `` `` `` `` `` `` `` `` ``

A função PostMessage recebe dois parâmetros: a primeira é a mensagem a ser enviada e a segunda é a fonte da janela de origem.

NOTA: Somente quando a fonte da janela de destino corresponde ao valor do parâmetro de origem aprovado na função pós -maquiagem, a mensagem pode ser recebida.

Receba mensagens de pós -maquiagem

Para receber mensagens da janela de origem anterior através do PostMessage, você só precisa registrar o evento de mensagem na janela de destino e vincular a função de monitoramento de eventos para obter a mensagem no parâmetro de função.

 Window.onLoad = function () {Var Text = Document.getElementById ('TXT'); + e.origin); } if (window.addeventListener) {// Registre o evento da mensagem para a janela e vincule a window da função de monitoramento. ;}};

A função de monitoramento de eventos de mensagens recebe um parâmetro, uma instância do objeto de evento, que possui três atributos:

  1. Mensagem específica enviada por dados
  2. Origem envia uma fonte de mensagem
  3. Cotação de objeto de janela da fonte envia uma janela de mensagem
ilustrar

  1. Você pode definir o segundo parâmetro da função de pós -maquiagem para*e pulará a verificação da fonte da mensagem ao enviar mensagens de domínio cruzado.
  2. Postmessage pode enviar apenas informações de string.
Exemplo

Janela de origem

 <! # cccccc;} </style> </ading> <body> <button id = btn> Abra </botão> <botão ID = Send> Enviar </butter> <! jhssdemo.duapp.com/demo/h5_postmessage/win.html id = outrowin> </frame> <br/> <br/> "<Tipo de entrada = Valor do botão = Enviar para Child.com ID = sendMessage/> <Script> Window.onload = function () {var Btn = document.getElementById ('BTN'); Janela através de Window.open ('http: //jhssdemo.duapp .com/Demo/h5_postMessage/win.html', 'pop -up'); // Enviar documentos de dados.getElementById (OtherWin) .ContentWindow .PostMerSage (OUTROWIN) D (Mensagem). ;};

Janela de destino Win.html

 <! ;} </style> </ading> <body> <h1> A nova janela </h1> <div id = txt> </div> <cript> window.onload = function () {var text = document ('TXT'); (Norigin: + E.origin); Para o evento de mensagem e vincular a janela de função de monitoramento.AddeventListener ('Mensagem', RECEVEMSG, false);} else {window.attachevent ('Mensagem', Receivemsg); "
análise

Através do estudo deste artigo, aprendi sobre o uso da API de pós-maquiagem para usar o HTML5 para se comunicar entre as janelas, e também sei que ela pode ser usada para realizar a comunicação cruzada; como o IE7-, você pode usá-lo.

O acima é todo o conteúdo deste artigo.

Artigos Relacionados