Comunicación entre ventanas de JavaScript

Comunicar ventanas (window) con JavaScript

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

const ventana = window.open("otra_ventana.html");

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:

// Definición de función
window.establecerMensaje = function (mensaje) {
 console.log("Mensaje: " + mensaje);
}

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.

const ventana = window.open("otra_ventana.html");
ventana.addEventListener("DOMContentLoaded", function () {
  console.log("Ventana abierta lista!");
  ventana.establecerMensaje("Hola. Enviando datos desde la ventana padre a la hija");
});

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:

function establecerMensaje(m) {
 console.log("Mensaje recibido de hijo: ", m)
}

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.

if (window.opener) {
  window.opener.establecerMensaje("Enviando un mensaje desde la ventana hija");
}

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:

<!--

    Programado por Luis Cabrera Benito 
  ____          _____               _ _           _       
 |  _ \        |  __ \             (_) |         | |      
 | |_) |_   _  | |__) |_ _ _ __ _____| |__  _   _| |_ ___ 
 |  _ <| | | | |  ___/ _` | '__|_  / | '_ \| | | | __/ _ \
 | |_) | |_| | | |  | (_| | |   / /| | |_) | |_| | ||  __/
 |____/ \__, | |_|   \__,_|_|  /___|_|_.__/ \__, |\__\___|
         __/ |                               __/ |        
        |___/                               |___/         
    
    
    Blog:       https://parzibyte.me/blog
    Ayuda:      https://parzibyte.me/blog/contrataciones-ayuda/
    Contacto:   https://parzibyte.me/blog/contacto/
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Ventana padre</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <br>
  <button id="btnAbrir">Abrir ventana</button>
  <br><br>
  <p>Si la ventana está abierta...</p>
  <input type="text" id="mensaje" placeholder="Mensaje">
  <button id="btnEnviarMensaje">Enviar mensaje</button>
  <p id="mensajeRecibido">Aquí aparecerá el mensaje recibido</p>
    <script src="padre.js"></script>
  </body>
</html>

/*

    Programado por Luis Cabrera Benito 
  ____          _____               _ _           _       
 |  _ \        |  __ \             (_) |         | |      
 | |_) |_   _  | |__) |_ _ _ __ _____| |__  _   _| |_ ___ 
 |  _ <| | | | |  ___/ _` | '__|_  / | '_ \| | | | __/ _ \
 | |_) | |_| | | |  | (_| | |   / /| | |_) | |_| | ||  __/
 |____/ \__, | |_|   \__,_|_|  /___|_|_.__/ \__, |\__\___|
         __/ |                               __/ |        
        |___/                               |___/         
    
    
    Blog:       https://parzibyte.me/blog
    Ayuda:      https://parzibyte.me/blog/contrataciones-ayuda/
    Contacto:   https://parzibyte.me/blog/contacto/
*/const $btnAbrir = document.querySelector("#btnAbrir"),
 $mensaje = document.querySelector("#mensaje"),
 $btnEnviarMensaje = document.querySelector("#btnEnviarMensaje"),
 $mensajeRecibido = document.querySelector("#mensajeRecibido");

let ventana;
$btnAbrir.addEventListener("click", () => {
 ventana = window.open("otra_ventana.html");
});

$btnEnviarMensaje.addEventListener("click", () => {
 let mensaje = $mensaje.value;
 if (!mensaje) {
  return;
 }
 if (ventana) {
  ventana.establecerMensaje(mensaje);
 }
});

// Llamada desde la hija
function establecerMensaje(mensaje) {
 $mensajeRecibido.textContent = mensaje;
}

Y luego a la que se abre:

/*

    Programado por Luis Cabrera Benito 
  ____          _____               _ _           _       
 |  _ \        |  __ \             (_) |         | |      
 | |_) |_   _  | |__) |_ _ _ __ _____| |__  _   _| |_ ___ 
 |  _ <| | | | |  ___/ _` | '__|_  / | '_ \| | | | __/ _ \
 | |_) | |_| | | |  | (_| | |   / /| | |_) | |_| | ||  __/
 |____/ \__, | |_|   \__,_|_|  /___|_|_.__/ \__, |\__\___|
         __/ |                               __/ |        
        |___/                               |___/         
    
    
    Blog:       https://parzibyte.me/blog
    Ayuda:      https://parzibyte.me/blog/contrataciones-ayuda/
    Contacto:   https://parzibyte.me/blog/contacto/
*/

// Este script es incluido en la ventana que abre la principal
const $btnEnviar = document.querySelector("#btnEnviar"),
 $mensaje = document.querySelector("#mensaje"),
 $mensajeRecibido = document.querySelector("#mensajeRecibido");
$btnEnviar.addEventListener("click", () => {
 const mensaje = $mensaje.value;
 if (!mensaje) return alert("Escribe un mensaje");
 if (window.opener) {
  window.opener.establecerMensaje(mensaje);
 }
});


// Definición de función desde la que nos llama el padre
window.establecerMensaje = function (mensaje) {
 $mensajeRecibido.textContent = mensaje;
}

<!--

    Programado por Luis Cabrera Benito 
  ____          _____               _ _           _       
 |  _ \        |  __ \             (_) |         | |      
 | |_) |_   _  | |__) |_ _ _ __ _____| |__  _   _| |_ ___ 
 |  _ <| | | | |  ___/ _` | '__|_  / | '_ \| | | | __/ _ \
 | |_) | |_| | | |  | (_| | |   / /| | |_) | |_| | ||  __/
 |____/ \__, | |_|   \__,_|_|  /___|_|_.__/ \__, |\__\___|
         __/ |                               __/ |        
        |___/                               |___/         
    
    
    Blog:       https://parzibyte.me/blog
    Ayuda:      https://parzibyte.me/blog/contrataciones-ayuda/
    Contacto:   https://parzibyte.me/blog/contacto/
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Ventana hija</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <input type="text" id="mensaje" placeholder="Enviar al padre">&nbsp;
  <button id="btnEnviar">Enviar</button>
  <br>
  <p id="mensajeRecibido">Aquí aparece el mensaje recibido</p>
    <script src="hija.js"></script>
  </body>
</html>

Puedes probar el ejemplo en este enlace.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

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/