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:
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.
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.
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.
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.
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.
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");
}He creado una página de demostración en donde puedes probar todo lo expuesto aquí.
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">
<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.
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.