Recientemente encontré una necesidad en el trabajo. El escenario es: la página h5 está integrada en la página de la PC como un módulo de vista previa. El usuario puede realizar algunas operaciones en la página de la PC y luego la página h5 realiza cambios de respuesta para lograr el efecto de vista previa. .
Lo primero que me viene a la mente aquí es incrustar la página h5 en la página web de la computadora usando un iframe, y luego la computadora envía los datos modificados al iframe a través del método postMessage. El h5 incrustado en el iframe recibe los datos a través de addEventListener. y luego realiza cambios de respuesta en los datos.
Aquí hay un resumen del uso de postMessage. La API es muy simple:
otherWindow.postMessage(mensaje, targetOrigin, [transferencia]);
otherWindow es una referencia a la ventana de destino, que es iframe.contentWindow en el escenario actual;
message es el mensaje enviado. Antes de Gecko 6.0, el mensaje debía ser una cadena, pero las versiones posteriores pueden enviar el objeto directamente sin serializarlo usted mismo;
targetOrigin representa el origen de la ventana de destino y 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. Para datos confidenciales, es muy importante establecer el origen de la ventana de destino;
Cuando se llama a postMessage(), se envía un evento de mensaje a la ventana de destino. Esta interfaz tiene un evento de mensaje, que tiene varias propiedades importantes:
1.datos: como sugiere el nombre, es el mensaje pasado
2.fuente: el objeto de ventana que envía el mensaje
3.origen: el origen de la ventana del mensaje (protocolo + host + número de puerto)
De esta forma, podemos recibir mensajes entre dominios y también podemos enviar mensajes de vuelta de forma similar.
La transferencia de parámetros opcional es una cadena de objetos transferibles que se pasan junto con el mensaje. La propiedad de estos objetos se transferirá al receptor del mensaje y el remitente ya no conservará la propiedad.
Luego, cuando se inicializa iframe , puede obtener la referencia al iframe y enviar el mensaje a través del siguiente código:
// Tenga en cuenta que esto no es para obtener la referencia dom del iframe, sino la referencia de la ventana del iframe const iframe = document.getElementById('myIFrame').contentWindow;iframe.postMessage('hello world', 'http:/ /tuhost.com');En un iframe, el mensaje se puede recibir a través del siguiente código.
window.addEventListener('mensaje', msgHandler, false);Al recibir, puede filtrar el origen del mensaje según sea necesario para evitar ataques XSS causados por la recepción de mensajes con nombres de dominio ilegales.
Finalmente, para la reutilización del código, el envío y la recepción de mensajes se encapsulan en una clase y se simula la API del tipo de mensaje, lo cual es muy conveniente de usar. El código específico es el siguiente:
exportar clase predeterminada Messager { constructor(win, targetOrigin) { this.win = win; this.targetOrigin = targetOrigin; this.actions = {}; => { if (!event.data || !event.data.type) { return } tipo constante = event.data.type; (!this.actions[type]) { return console.warn(`${type}: falta el oyente` } this.actions[type](event.data.value } on = (type, cb) =); > { this.actions[tipo] = cb; devolver esto } emitir = (tipo, valor) => { this.win.postMessage({ tipo, valor }, this.targetOrigin } destruir(); window.removeEventListener('mensaje', this.handleMessageListener }}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.