Entradas con la etiqueta ‘opener’

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