Quando codificamos, frequentemente encontramos as seguintes situações entre domínios:
1. Aninhamento de iframes na página e mensagens com iframes
2. Transfira mensagens entre páginas e múltiplas páginas
Em resposta a esses problemas problemáticos entre domínios, o HTML5 lançou especialmente um novo recurso postMessage (transmissão de mensagens entre documentos). Ao usar postMessage, você precisa passar dois parâmetros, data e originUrl. Os dados referem-se ao conteúdo que precisa ser passado, mas alguns navegadores só podem lidar com parâmetros de string, portanto, geralmente serializamos os dados, ou seja, JSON.stringify(), e originUrl refere-se ao URL de destino e à janela especificada.
Abaixo está um exemplo, acredito que será mais fácil para todos entenderem e escreverem.
1. Iframe aninhado na página
Página pai:
HTML:
<div id='parent'>olá palavra postMessage</div><iframe src=http://127.0.0.1:8082/index2.html id='child'></iframe>
js:
window.onload=function(){ window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')} window.addEventListener('message',function(e) { console.log(e) document.getElementById('parent').style.color=e.data})Subpágina:
HTML:
<div id='button' onclick='changeColor();' style=color:yellow>Aceitar informações</div>
js:
window.addEventListener('message',function(e){ console.log(e) let color = document.getElementById('button').style.color window.parent.postMessage(color,'http://127.0.0.1 :8081/index.html')});function changeColor(){ deixe buttonColor = document.getElementById('button').style.color buttonColor='#f00' window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')}A página pai passa mensagens para o iframe por meio do método postMessage, e a página filha escuta o método de mensagem por meio de window.addEventListener para obter o valor passado pela página pai. Conforme mostrado na figura abaixo, dados são o valor passado pela página pai.
Quando a página filha transmite mensagens para a página pai, ela também passa a mensagem pelo método postMessage, em vez de passar o valor por window.parent.postMessage(data,url). A página pai também escuta o evento de mensagem ao obter o valor.
2. Passe mensagens entre várias páginas
Página pai:
HTML:
<div id='parent' onclick=postMessage()>olá palavra postMessage</div>
js:
deixe pai = document.getElementById('parent')function postMessage(){ deixe windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage') setTimeout(function(){ windowOpen .postMessage('postMessageData','http://127.0.0.1:8082/index2.html') },1000) }Subpágina:
HTML:
<div id='button' onclick='changeColor();' style=color:#f00>Aceitar informações</div>
js:
window.addEventListener('mensagem',function(e){ console.log(e) });A página pai envia uma mensagem para a página filha para abrir outra página por meio de window.open e, em seguida, passa o valor para ela. Ressalta-se que ao utilizar postMessage para transferir valores, é necessário utilizar setTimeout para atrasar a entrega da mensagem, pois o carregamento da subpágina não é concluído de uma vez, o que significa que o evento de escuta da subpágina ainda não foi iniciado e o valor foi passado neste momento. Não pode ser recebido.
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.