En JavaScript podemos abrir una nueva pestaña o ventana (window) y comunicarnos con ella. Es decir, abrir una ventana con window.open y después hacer algo de lo siguiente:
- Enviarle mensajes o datos a la ventana hija, recién abierta
- Desde la ventana abierta, enviarle mensajes o datos a la ventana padre
Veamos cómo comunicar o enviar datos entre ventanas con JavaScript. Al final del post dejaré un ejemplo para que puedas probarlo y analizarlo tú mismo.
Primero: cómo abrir una ventana
Podemos abrir una ventana y obtener una referencia a la misma, así:
Como ves, se debe indicar la ruta que se desea abrir. Eso puede ser una simple ruta HTML, una con PHP, etcétera, será como abrir otra pestaña.
Por cierto me parece que también se puede especificar la medida de la misma y otras cosas, pero por el momento nos vamos a centrar en la comunicación entre ventanas.
Ahora que ya tenemos una referencia a la ventana, podemos hacer con ella lo mismo que haríamos con nuestro window.
Definir función para comunicar en ventana abierta
Desde la ventana padre vamos a invocar alguna función de la ventana hija, siempre y cuando esté disponible en la ventana o de manera global. Así que en la hija definimos lo siguiente:
Cuando lo necesitemos, desde el padre podremos invocar a ventana.establecerMensaje.
Enviar mensajes a ventana abierta
Ahora que ya definimos la función desde la ventana hija, veamos cómo invocar a la función desde la ventana padre. Debemos esperar a que la ventana esté preparada así que esperamos el DOMContentLoaded y luego le enviamos datos.
Por cierto, en este caso simplemente estamos esperando y enviando datos. Podría ser que se envíen datos al presionar un botón, etcétera.
De este modo estamos pasando datos a la ventana hija. Te aclaro que por ahora es una simple cadena, pero se pueden pasar todo tipo de datos, solo defínelos en tu función.
Comunicando con el padre
Desde la ventana hija, podemos invocar a funciones definidas en la ventana padre a través de window.opener. Comenzamos definiendo una función en la ventana padre, que será invocada desde la hija:
En este caso la defino con una sintaxis diferente, pero al ser global igualmente estará disponible desde window.
Enviando mensajes desde hija
Y bien, ahora que el padre ya tiene una forma de recibir nuestro mensaje, lo enviamos usando la referencia a window.opener.
Poniendo todo junto
He creado una página de demostración en donde puedes probar todo lo expuesto aquí.
Tenemos a la ventana principal:
Y luego a la que se abre:
Puedes probar el ejemplo en este enlace.
