JS – Comunicación entre ventanas
Publicado por Iván Gajate el 30 de septiembre de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.
Si una ventana de html abre otra, estas se pueden comunicar entre ellas. Normalmente se hace con window.open, pero a mi este método no me gusta porque eso abre un popup y la mayoría de navegadores tienen bloqueados los popups.
Lo que muchos no saben es que abriendo una ventana desde un enlace directo, no se bloquea la ventana y se siguen pudiendo comunicar de la misma manera, a través del window.opener
Dejo un ejemplo de un index, que abre una ventana hija (hijo.html)
Este hijo a su vez, tiene un iframe que carga ok.html
Esto lo hago porque hay muchos servicios, como Youtube o Facebook que se abren en un iframe, y una vez logado el usuario, se re dirigen a una url dada. De esta forma, nuestra app de Youtube estaría dentro de nuestro iframe, y este puede comunicarle a quien quiera que se ha logado con éxito.
HTML PADRE:
<body> <a href="hijo.html" target="_blank">Abrir ventana</a> <script> // La ventana hijo me informa que se ha abierto, y me puede pasar una referencia suya function popupAbierto(windowHijo){ console.log("Ventana Abierta!! " , windowHijo); } // La ventana hijo me informa que se ha cerrado function popupCerrado(){ console.log("Ventana Cerrada"); } </script> </body> |
HTML HIJO:
<body> <iframe src="ok.html" frameborder="1"></iframe> <script> // Informo de que me han abierto. Puedo pasarle una referencia a esta ventana para que pueda acceder a ella el padre window.opener.popupAbierto(window); // Le digo a la ventana padre que esta ventana se va a cerrar (tambien puedo delegar esta responabilidad al padre) function usuarioLogado(){ window.opener.popupCerrado(); window.close(); } </script> </body> |
HTML OK:
<body> <a href="javascript:logadoOk()" target="_self">Ya me he logado y quiero cerrar esta ventana</a> <script> // Se lo comunico la ventana contenedora de este iFrame function logadoOk(){ window.parent.usuarioLogado(); } </script> </body> |
Descargar ejemplo de comunicación entre ventanas