Muchas veces queremos hacer aplicaciones web que comunique información de una ventana a otra. Existen diversos métodos para manejar esta información, como: XML, JSON, TXT, etc. Todo esto lo usamos al manejar llamadas asíncronas. Sin embargo también podemos hacerlo con Javascript a través de un query string. El hecho es que en una ventana hacemos una lógica y en otra ventana manejamos otra de acuerdo a la información enviada, para hacer esto les mostrare un método con Javascript que no es mas ni menos que estar trabajando con el DOM y con nuestros objetos.
PANORAMA
Tenemos dos páginas web que llamaremos paginaPadre.html y paginaHijo.html. La página padre que contiene un botón para abrir la página hijo. La página hijo contendrá Texto y dos elementos con los cuales trabajaremos, un input y un botón. Despues de introducir texto en el input y presionar el boton, se escribirá en un elemento <p> de la página padre el texto que hayamos introducido. Y aquí vamos:
paginaPadre.html
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>prueba-padre</title> <script type="text/javascript"> function abrirHijo() { window.open("paginaHijo.html", "popupId", "location=no,menubar=no,titlebar=no,resizable=no,toolbar=no, menubar=no,width=500,height=500"); } </script> </head> <body> <h1 id="text">Comunicación entre dos páginas con Javascript.</h1> <button onclick="abrirHijo();">Abrir Página Hijo.</button> <p id="deHijo"></p> </body> </html> |
paginaHijo.html
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>prueba-beforeclose</title> <script type="text/javascript"> function cerrar() { var data = window.document.getElementById('val1').value; window.opener.document.getElementById('deHijo').innerHTML = "Este texto viene de la página hijo: "+data; this.window.close(); } </script> </head> <body> <h1 id="text">Ésta es la página hijo lo que escriba en el input se mostrará en la página padre al cerrarla.</h1> <input type="text" id="val1" /> <button onclick="cerrar();">Cerrar</button> <div id="dialog1"> <p>In scelerisque pid, porttitor magnis, in, cras aliquam nec et pulvinar nec odio adipiscing in integer. Augue ultricies scelerisque a, odio scelerisque elementum elementum, pulvinar integer nascetur! Pulvinar dignissim! Phasellus? Cras proin platea platea vut sit velit pid sit purus, ac elit purus enim, aliquet! Est mus arcu elementum cum! In. Augue odio magnis nunc! Diam. Ac? Elementum tincidunt, platea vel platea mauris parturient? Integer, elit sociis integer ac dapibus augue cras. In tincidunt, amet, enim phasellus aliquet pellentesque magna.</p> </div> </body> </html> |
En la página padre lo que hace que se abra nuestra ventana es con esta función que es llamada al presionar el botón de abrir:
| 1 2 3 | function abrirHijo() { window.open("paginaHijo.html", "popupId", "location=no,menubar=no,titlebar=no,resizable=no,toolbar=no, menubar=no,width=500,height=500"); } |
Y en la página hijo lo que nos va a permitir comunicarnos con la pagina padre es
| 1 | window.opener |
La propiedad opener regresa una referencia a la página que la abrió, por lo tanto con esta podemos manderle información generada en la página hijo. Esto quiere decir que los datos que genero en la pagina hijo se puden asignar a elementos de la página padre, es por eso que el valor capturado en el input se lo asigno al <p> de la página padre y despues de hacer esto mando llamar a la funcion close para cerrar la página hijo.
Si estamos trabajando con PHP y la pagina hijo es php, podemos enviar la información de la página padre a través de un query string, lo procesamos y luego asignamos ese valor a un input y lo mostramos en la pagina padre.
Código PHP que procesa un query string
| 1 | <?php |
| 1 2 3 4 5 6 | // el query string procesado es paginaPadre.html?v1=4&v2=3 $valor1 = $_GET['v1']; $valor2 = $_GET['v2']; $res = $valor1 + $valor2; ?> |
Y lo usamos en nuestra pagina llamada paginaHijo.php
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?php $valor1 = $_GET['v1']; $valor2 = $_GET['v2']; $res = $valor1 + $valor2; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>prueba-beforeclose</title> <script type="text/javascript"> function cerrar() { var data = window.document.getElementById('val1').value; window.opener.document.getElementById('deHijo').innerHTML = "Este texto viene de la página hijo: "+data; this.window.close(); } </script> </head> <body> <h1 id="text">Ésta es la página hijo que procesa un query string</h1> <input type="text" id="val1" value="<?php echo $res;?>" disabled="disabled"/> <button onclick="cerrar();">Cerrar</button> </body> </html> |
De esta manera es como comunicamos la información entre dos páginas a trabes de document.opene y un query string. Si tienes preguntas o comentarios puedes dejarlos abajo y te puedo ayudar, saludos.