Cuando codificamos, a menudo nos encontramos con las siguientes situaciones entre dominios:
1. Anidamiento de iframes dentro de la página y mensajería con iframes
2. Transferir mensajes entre páginas y varias páginas.
En respuesta a estos problemáticos problemas entre dominios, HTML5 ha lanzado especialmente una nueva función: postMessage (transmisión de mensajes entre documentos). Cuando utilice postMessage, debe pasar dos parámetros, datos y originUrl. Los datos se refieren al contenido que se debe pasar, pero algunos navegadores solo pueden manejar parámetros de cadena, por lo que generalmente serializamos los datos, es decir, JSON.stringify (), y originUrl se refiere a la URL de destino y la ventana especificada.
A continuación se muestra un ejemplo, creo que será más fácil de entender y escribir para todos.
1. iframe anidado dentro de la página
Página principal:
HTML:
<div id='parent'>hola palabra postMessage</div><iframe src=http://127.0.0.1:8082/index2.html id='child'></iframe>
js:
window.onload=function(){ ventana.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:amarillo>Aceptar información</div>
js:
window.addEventListener('mensaje',función(e){ console.log(e) let color = document.getElementById('botón').style.color window.parent.postMessage(color,'http://127.0.0.1 :8081/index.html')}); función changeColor(){ let buttonColor = document.getElementById('button').style.color buttonColor='#f00' window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')}La página principal pasa mensajes al iframe a través del método postMessage y la página secundaria escucha el método del mensaje a través de window.addEventListener para obtener el valor pasado por la página principal. Como se muestra en la figura siguiente, los datos son el valor pasado por la página principal.
Cuando la página secundaria transmite mensajes a la página principal, también pasa el mensaje a través del método postMessage, en lugar de pasar el valor a través de window.parent.postMessage(data,url). La página principal también escucha el evento del mensaje cuando obtiene el valor.
2. Pasar mensajes entre varias páginas
Página principal:
HTML:
<div id='parent' onclick=postMessage()>hola palabra postMessage</div>
js:
let parent = document.getElementById('parent')function postMessage(){ let 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>Aceptar información</div>
js:
window.addEventListener('mensaje',función(e){ console.log(e) });La página principal envía un mensaje a la página secundaria para abrir otra página a través de window.open y luego le pasa el valor. Cabe señalar que cuando usa postMessage para transferir valores, debe usar setTimeout para retrasar la entrega del mensaje, porque la carga de la subpágina no se completa de inmediato, lo que significa que el evento de escucha de la subpágina Aún no ha comenzado y el valor se pasa en este momento. No se puede recibir.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.