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.

Relacionado:  Prototype en JavaScript: definición y ejemplos de uso

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í.

Comunicar ventanas (window) con JavaScript

Tenemos a la ventana principal:

Y luego a la que se abre:

Puedes probar el ejemplo en este enlace.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 577 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: