JavaScript: Cerrar un popup desde la página madre

Típico, que estas programando una página web y necesitas una ventana popup para apoyar alguna función de la página principal, poner alguna advertencia o que el usuario seleccione algún dato que será pasado a la página principal… cosas comunes.

Pero esta vez me tope con un caso un poco diferente, resulta que necesitaba que fuese la página madre la que después de terminar un proceso propio cerrara al popup y… pues instrucciones para manipular a la página madre desde el popup hay muchas pero en sentido inverso no tantas. La forma más sencilla es apoyándose en una variable para poder mantener el control del popup y manipularlo de la siguiente manera usando JavaScript.

Si quieren probar un ejemplo sencillo con un par de páginas simples en su computadora bajen este ejemplo antes de continuar: DESCARGAR EJEMPLO.

Dentro del archivo, La página principal es javascript.html así que ábrala en su navegador porque será la pagina donde probaremos abrir y cerrar un popup y a leer un dato en la página principal desde un popup para lograr un efecto en esta página hija. Se verá algo parecido a la imagen de al lado.

La otra, javascript2.html será un popup llamado desde la primera página y lo usaremos para que lea un dato en que escribamos en la página madre.

Así vemos como un evento puede abrir el popup y el otro lo cierra, todo desde la misma ventana madre. Este es solo un ejemplo para que usted estimado lector tenga total control del proceso pero en cuestiones más practicas como la que yo comentaba, al poder cerrar el popup desde una función en la ventana madre puede invocarse desde algún otro método automático en el momento preciso para mi sin necesidad de intervención humana.

El código para las funciones de abrir y cerrar popup usadas en estos botones -y para obtener la resolución del monitor y centrar el popup en la pantalla como bonus- de ejemplo es el siguiente:

var popup = null; // Variable compartida entre las funciones
function abrir()
{
	var height = (screen.height-66)/2;
	var width = (screen.width-66)/2;
	popup = window.open('loading.gif', 'popup', 
		'width=66,height=66,top='+height+',left='
		+width+',resizable=no,scrollbars=no');
}
function cerrar()
{
	popup.close(); // Cerrar la ventana
}

INCONVENIENTES: Pero hay un inconveniente con este método, resulta que solo funciona mientras la página original no se recargue, al hacer un postback se pierde el control del popup y ya no puede cerrarse desde la página madre lo cual reduce los escenarios donde este uso del javascript nos es útil, entonces hay que hacerle un ajuste extra para poder hacer que el popup se cierre cuando lo necesitamos.

Para lidiar con ese efecto podríamos dar alguna instrucción desde la página original… si supiera cual o como, si alguno sabe por favor dígamelo, y como no pude entonces podemos probar el camino inverso accediendo desde el popup a la página madre en busca de alguna señal que indique cuando debe cerrarse mediante window.opener que nos da la posibilidad de leer campos en la ventana principal. El código interesante de ese popup es que manda llamar a una función que lee cierto campo en la ventana principal y si encuentra un dato especifico se cierra así mismo. Si no lo encuentra entonces algunos segundos después va a volver a buscar. El código de la función sigue los principios de este ejemplo:

function timer()
{
	// Leer el campo en la página madre
	var caracter = opener.document.forms[0].texto.value;
	if (caracter.length > 0) // Si hay algo
	{
		alert('En la ventana madre escribio esto: ' 
		+ caracter);
		window.close(); // Cerrar este popup
	}
	else // Si no hay nada
	{
		alert('Escriba en la ventana antes de 5 segundos.');
		setTimeout(timer, 5000); // buscar en 5 segundos
	}
}

La idea es que setTimeout([nombre de la función], [tiempo en milisegundos]); nos permite buscar algún dato o variable en la página madre que nos va a indicar que ya es momento de que el popup se cierre, y como no lo puedo cerrar desde la página principal simplemente le dejamos una señal para que se cierre a si mismo. Para la versión de producción mía en lugar de usar un botón mejor invoco la función desde el metodo onload del body de la página, cuestión de adaptarse.