Este artículo presenta la explicación detallada de html5 postMessage para resolver el problema de la comunicación entre dominios y la comparte con todos. Los detalles son los siguientes:
representaciones
El análisis postmessage HTML5 proporciona un nuevo mecanismo PostMessage para lograr una comunicación segura entre orígenes. Sintaxis otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow: una referencia a otras ventanas, como la propiedad contentWindow de IFRAME, ejecución, objeto de ventana devuelto por window.open mensaje: datos que se enviarán a otras ventanas targetOrigin: especifique qué ventanas pueden recibir eventos de mensajes a través de la propiedad de origen. en la ventana, su valor puede ser el carácter * (que indica ilimitado) o una URL de transferencia: es una cadena de objetos Transferibles que se pasan al mismo tiempo que el mensaje. La propiedad de estos objetos se transferirá al destinatario del mensaje. Una vez enviado, la propiedad ya no se conservará. element.addEventListener(event,fn,useCaption); El evento de evento de tres parámetros, como hacer clic con el mouse, ingresar con el mouse, dejar la función de devolución de llamada useCaption, se usa para describir si está burbujeando o capturando. El valor predeterminado es falso, lo que significa entrega en forma de burbuja. Cuando el valor es verdadero, se captura y se pasa. Método de implementación
Interfaz principal main.html
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho-dispositivo, escala-inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=es decir=edge> <título>Acceso a datos entre dominios</título> <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;> Soy la interfaz principal, esperando recibir la entrega del iframe</div> <div style=margin:100px;> iframe < iframe src= http://localhost:3000/iframe.html ancho=800px alto=300px >>iframe> </div></body></html>interfaz de marco flotante
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho-dispositivo, escala-inicial=1.0> <meta http-equiv=X-UA -Contenido compatible = es decir = borde> <título>Documento</título> <tipo de estilo=texto/css> html,cuerpo{ altura:100% margen:0px; } </style></head> <estilo del cuerpo=altura:100%;> <div id=estilo del marco=altura:200px; ancho:200px;color de fondo:rgb(204, 204, 0) onclick=cambiarColor( )> Haga clic para cambiar el color</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)' }else{ color='rgb(204,102,0) )'; } console.log(marco====>,marco); console.log(color,color.estilo.fondoColor=color); ventana.parent.postMessage(color,'*');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.