Este artigo apresenta a explicação detalhada do postMessage html5 para resolver o problema de comunicação entre domínios e compartilha-o com todos.
renderizações
análise de pós-mensagem HTML5 fornece um novo mecanismo PostMessage para obter comunicação segura entre origens Sintaxe otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow: uma referência a outras janelas, como a propriedade contentWindow do IFRAME, execução, objeto window retornado por window.open message: dados a serem enviados para outras janelas targetOrigin: especifica quais janelas podem receber eventos de mensagens através da propriedade origin de outras janelas. na janela, seu valor pode ser o caractere * (indicando ilimitado) ou uma URL de transferência: é uma string de objetos transferíveis passada ao mesmo tempo que a mensagem. A propriedade desses objetos será transferida para o destinatário da mensagem. Uma vez enviada, a propriedade não será mais retida. element.addEventListener(event,fn,useCaption); O evento de evento de três parâmetros, como a função de retorno de chamada click mouseenter mouseleave useCaption, é usado para descrever se está borbulhando ou capturando. O valor padrão é falso, o que significa entrega em bolha. Quando o valor é verdadeiro, ele é capturado e passado. Método de implementação
Interface principal main.html
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Acesso a dados entre domínios</title> <script type=text/javascript> window.addEventListener('message',function(e){ console.log(e--->,e); const data = e.data; document.getElementById('main1').style.backgroundColor=e.data; },falso) </script></head><body> <div id=main1 style=width:200px;height:200px;margin:100px;border:solid 1px #000;> Sou a interface principal, aguardando receber a entrega do iframe</div> <div style=margin:100px;> iframe < iframe src= http://localhost:3000/iframe.html largura=800px altura=300px </iframe> </div></body></html>interface iframe
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Documento</title> <style type=text/css> html,body{ height:100% margin:0px; } </style></head> <body style=height:100%;> <div id=frame style=height:200px width:200px;background-color:rgb(204, 204, 0) onclick=changeColor( )> Clique para alterar a cor</div> <script type=text/javascript> function changeColor(){ var frame = document.getElementById('frame'); var color=frame.style.backgroundColor; if(color=='rgb(204, 102, 0)'){ color='rgb(204, 204, 0)'; )'; } console.log(frame====>,frame); console.log(cor,cor); window.parent.postMessage(color,'*');O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.