El front-end postMessage y addEventListener están enfrentados

Función de destino:

La página uno entre dominios abre la página dos. Después de que la página dos escucha el mensaje a través de addEventListener, devuelve información de confirmación. Después de que la página uno escucha la información de confirmación enviada por la página dos a través de addEventListener, envía el paquete de datos a la página dos. La página 2 procesa el paquete de datos después de obtenerlo.

Introducción a postMessage (extraído de blogs de otras personas, si se trata de plagio, contácteme):

HTML5 propone un nuevo método para pasar valores entre dominios, a saber, postMessage. Supongamos que hay dos sitios web, 1.com y 2.com. Abro una página web de 2.com a través de iframe o window.open o hipervínculo en la página de 1.com. En este momento, quiero abrir una página de 2.com. página web en 2.com Al realizar la operación, pase el valor a 1.com para realizar el cambio de 1.com. Este proceso es un proceso entre dominios.

Si está familiarizado con window.open, sabrá que se puede acceder a la página web abierta a través de window.open (la llamamos subpágina web) a través del objeto window.opener (página principal), en este De esta manera, llamar a la función de la página principal es muy simple. Sin embargo, en condiciones de dominio cruzado, window.opener se convierte en un objeto vacío sin "permisos", el navegador se lo indicará.

Por ejemplo, su página principal tiene una función llamada devolución de llamada, y su subpágina podría haber llamado a window.opener.callback() de esta manera. Tendrá éxito cuando esté en el mismo dominio, pero lo será. no tiene permiso cuando es entre dominios. Sin embargo, si llama a window.opener.postMessage() en este momento, ¡lo logrará!

parámetros postMessage: postMessage(message, targetOrigin, [transfer])

mensaje:

Datos a 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.

Tres atributos del mensaje:

datos: objeto pasado desde otras ventanas.

Origen: el origen de la ventana del remitente del mensaje cuando se llama a postMessage. Esta cadena se compone de protocolo, "://", nombre de dominio, ": número de puerto". Por ejemplo ":8080". Tenga en cuenta que no se garantiza que este origen sea el origen actual o futuro de la ventana, ya que postMessage puede navegar a una ubicación diferente después de ser llamado.

fuente: una referencia al objeto de ventana que envió el mensaje; puede usar esto para establecer comunicación bidireccional entre dos ventanas con diferentes orígenes.

targetOrigin:

Utiliza el atributo de origen de la ventana para especificar qué ventanas pueden recibir eventos de mensajes. Su valor puede ser la 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 (parámetro opcional)

es una cadena de objetos Transferibles que se transfieren al mismo tiempo que el mensaje. La propiedad de estos objetos se transferirá al receptor del mensaje. y el remitente ya no conservará el título.

Rutina: Google y Baidu se comunican

Página 1

Página 2

Página 1

Por esta página puede comunicar datos

Introducción a addEventListener: el método addEventListener() se utiliza para agregar un controlador de eventos al elemento especificado.

AddEventListener tiene tres parámetros:

elemento .addEventListener( evento , función , useCapture )

Descripción del parámetro

{

evento (obligatorio): cadena, especificando el nombre del evento.

Nota: No utilice el prefijo "on". Por ejemplo, utilice "hacer clic" en lugar de "al hacer clic".

Consejo: Para conocer todos los eventos HTML DOM, consulte nuestro /jsref/dom-obj-event.html completo.

función (obligatoria): Especifique la función que se ejecutará cuando se active el evento.

Cuando el objeto de evento se pasa a la función como primer parámetro. El tipo de objeto de evento depende del evento específico. Por ejemplo, el evento "clic" pertenece al objeto MouseEvent.

useCapture (opcional): Valor booleano que especifica si el evento se ejecuta en la fase de captura o de burbujeo.

Valores posibles:

verdadero: el controlador de eventos se ejecuta durante la fase de captura.

falso-falso-Predeterminado. El identificador de eventos se ejecuta en la fase de burbujeo

}

Rutina:

Después de agregar EventListener, debe eliminarlo para evitar que ocupe demasiada memoria

removeEventListener ¡La hora debe apuntar al mismo objeto que la hora de addEvent!

Las siguientes situaciones generarán diferentes objetos, lo que provocará que la eliminación falle.

"

1. window.addEventListener('message', (e) =gt; { }) Varias llamadas generarán diferentes funciones anónimas y varias veces, que deberían apuntar a la misma función con el mismo nombre

2. window.addEventListener('message', this.handler.bind(this)), llamado función Después de vincular esto, la llamada generará diferentes objetos

》