Ejemplo de método de escucha de front-end y dominio cruzado de front-end html5 postMessage

A veces te encuentras con requisitos tontos, como el inicio de sesión único en el front-end. Cuando te encuentras con una necesidad, debes pensar en una solución.

Aquí le brindaré una solución simple de inicio de sesión único.

Lo que se utiliza es la transmisión de información entre dominios postMessage y el monitoreo de almacenamiento.

Los puntos de conocimiento utilizados en este artículo son la configuración de koa de servicios de recursos estáticos, dominios cruzados, uso posterior a mensajes y almacenamiento de monitoreo en almacenamiento.

Usamos koa2 aquí para construir dos servicios a diferentes puertos para simular la situación entre dominios que debe ocurrir en el trabajo real.

Es muy simple y utiliza principalmente el middleware koa-static.

También es muy fácil de construir. Si desea obtener conocimientos relacionados con los nodos, puede agregarme a WeChat shouzi_1994 o dejar su información de contacto debajo del blog. No entraré en demasiadas tonterías aquí. Vídeo y habrá pasos de construcción detallados.

 // localhost:4000const Koa = require('koa'); const path = require('path')const static = require('koa-static')const app = new Koa();//Establecer la ruta de los recursos estáticos const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (el servicio comienza en el puerto 4000) app.listen(4000);// localhost:3000const Koa = require('koa'); const path = require('path')const static = require('koa-static' )const app = new Koa();//Establecer la ruta de los recursos estáticos const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (el servicio se inicia en el puerto 4000) app.listen(4000);

Primero echemos un vistazo a la API postMessage.

otherWindow.postMessage(mensaje, targetOrigin, [transferencia]);

otra ventana

Una referencia a otra ventana, como la propiedad contentWindow de un iframe, el objeto de ventana devuelto al ejecutar window.open, o window.frames con nombre o indexados numéricamente.

mensaje

Datos para enviar a otras ventanas. Será serializado mediante el algoritmo de clonación estructurada. Esto significa que puede transferir objetos de datos de forma segura a la ventana de destino sin restricciones y sin necesidad de serializarlos usted mismo. [1]

destinoOrigen

Especifique qué ventanas pueden recibir eventos de mensajes a través del atributo de origen de la ventana. Su valor puede ser una cadena (que indica ilimitado) o un URI. Al enviar un mensaje, si alguno de los protocolos, direcciones de host o puertos de la ventana de destino no coincide con el valor proporcionado por targetOrigin, el mensaje no se enviará, solo si los tres coinciden completamente, se enviará el mensaje. Este mecanismo se utiliza para controlar a qué mensajes de Windows se pueden enviar, por ejemplo, cuando se utiliza postMessage para transmitir una contraseña, este parámetro es particularmente importante y se debe garantizar que su valor sea exactamente el mismo que el atributo de origen del destinatario previsto; del mensaje que contiene la contraseña para evitar que terceros malintencionados intercepten las contraseñas. Si sabe exactamente a qué ventana se debe enviar el mensaje, proporcione siempre un valor exacto para targetOrigin. Si no se proporciona el objetivo exacto, se producirá la filtración de datos a cualquier sitio malicioso interesado en los datos.

transferencia opcional

Es una serie de objetos transferibles entregados al mismo tiempo que el mensaje. La propiedad de estos objetos se transferirá al receptor del mensaje y el remitente ya no conservará la propiedad.

¿Es fácil entender cómo funciona? Déjame explicarte en chino.

La ventana secundaria (principal) que se transferirá postMessage (contenido transmitido, a qué dirección transferir, [si se transfieren los permisos (generalmente no se usan)]);

Permítame decirle de antemano que si desea transferir entre dominios, debe ser una página principal-secundaria, es decir, una página a través de js Open o una página anidada en iframe.

Bien, comencemos a escribir código.

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=ie=edge> <title>Documento</title></head><body> <!-- postMessage y iframe resuelven problemas comunes entre dominios--> Soy el contenido del sitio web del puerto 3000 <button onclick=send()>Enviar un mensaje a mi hijo</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe ><script> function send() { window.frames[0].postMessage({a:1},http://localhost:4000 // Activa el evento de mensaje de la subpágina entre dominios} window.addEventListener('mensaje', función(evento) { console.info('Mi hijo escribió una carta', evento); }, false);</script></body></html> 

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=ie=edge> <title>Documento</title></head><body> <!-- postMessage y iframe resuelven problemas comunes entre dominios--> Soy el contenido del sitio web del puerto 4000 <button onclick=send()>Enviar un mensaje a papá</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <script> window.addEventListener(message,function(event){ console.log(Papá escribió:, evento) },false) function send() { parent.postMessage({a:1}, 'http://localhost:3000'); // }</script></body></html>

En este punto, hemos implementado la comunicación entre dominios entre las páginas principal y secundaria, pero esta comunicación solo ocurre dentro de una ventana y no logra el efecto que deseo. ¿Qué debo hacer?

En este punto, todo el mundo debe pensar en lo que pueden ver todos los sitios web con el mismo nombre de dominio en el navegador.

Así es, almacenamiento, sólo necesitamos monitorear esto.

Aquí elegimos escuchar localStorage y ahora hacemos mejoras en las subpáginas.

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=ie=edge> <title>Documento</title></head><body> <!-- postMessage y iframe resuelven problemas comunes entre dominios--> Soy el contenido del sitio web del puerto 4000 <button onclick=send()>Enviar un mensaje a papá</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <script> window.addEventListener(mensaje,función(evento){ console.log(Papá escribió:, evento) var data = JSON.stringify(event.data) window.localStorage.setItem(data,data) },false) window.onstorage(function(st){ console.log(st.key,st.value) }) function enviar() { parent.postMessage({a:1 }, 'http://localhost:3000'); // }</script></body></html>

Mire, ¿podemos ahora responder al contenido transmitido entre dominios?

Ahora que hemos logrado la comunicación entre dominios entre dos páginas, ¿cómo realizar tres o más comunicaciones entre dominios? De hecho, hay una verdad. Ahora que te he dicho la verdad, ve y experimenta el método de escritura tú mismo.

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.