Cerrar ventanas con Javascript

  • Por
Explicamos con detalle el proceso para cerrar ventanas del navegador mediante la programación Javascript.
Para cerrar la ventana del navegador debemos utilizar el método close() del objeto window de la vetana que deseamos cerrar. Es muy sencillo, aun así, vamos a ver un ejemplo sobre cerrar ventanas.

El ejemplo consta de una página que tiene un botón que abre una ventana secundaria o popup. Además, tendrá otro botón que cerrará la ventana secundaria. Por su parte, la ventana secundaria tendrá un botón que permitirá cerrarse a ella misma. Luego de tratar este ejemplo comentaremos el caso especial de cerrar la ventana principal desde el popup y las pegas que tiene.

Veamos el ejemplo en marcha y así comentaremos con más facilidad los códigos.

La página principal tendría esta forma:

<html>
<head>
<title>Ventana Principal</title>
<script>
//creamos la variable ventana_secundaria que contendrá una referencia al popup que vamos a abrir
//la creamos como variable global para poder acceder a ella desde las distintas funciones
var ventana_secundaria

function abrirVentana(){
//guardo la referencia de la ventana para poder utilizarla luego
ventana_secundaria = window.open("cerrar_window2.html","miventana","width=300,height=200,menubar=no")
}

function cerrarVentana(){
//la referencia de la ventana es el objeto window del popup. Lo utilizo para acceder al método close
ventana_secundaria.close()
}
</script>
</head>

<body>
Esta es la ventana principal
<form>
<input type=button value="Abrir ventana secundaria" onclick="abrirVentana()">
<br>
<br>
<input type=button value="Cerrar ventana secundaria" onclick="cerrarVentana()">
</form>

</body>
</html>


Contiene un script en la cabecera de la página con las funciones para abrir y cerrar la ventana. Además, como ya se indicó anteriormente en este manual, se debe guardar una referencia a la ventana que se acaba de abrir para poder realizar acciones sobre ella posteriormente, en este caso cerrarla. Como la referencia de la ventana se crea en la función abrirVentana() y luego se utilizará en la función cerrarVentana(), dicha referencia deberá declararse como global o de lo contrario sólo tendría validez mientras la función abrirVentana() estuviera ejecutándose y, cuando pretendiésemos utilizarla en la función cerrarVentana(), nos diría que esa referencia ya no existe.

Así que disponemos de una referencia global a la ventana que va a abrirse y dos funciones que abren el popup guardando la referencia y cerrar el popup utilizando la referencia de la ventana a cerrar. Estas dos funciones se llaman desde dos botones de la página, que hemos colocado dentro de un formulario. Podemos poner en marcha la página en una ventana aparte.

Nota: Hay que señalar que puede haber un error javascript si se pretende cerrar la ventana antes de abrirla. Para evitarlo podemos controlar que realmente la ventana está abierta antes de ejecutar el método close() de su objeto window, pero esa es una práctica que veremos en ejercicios más adelante.

Por su parte, el popup tiene un código como el siguiente.

<html>
<head>
<title>Ventana Secundaria</title>
<script>
function cerrarse(){
window.close()
}
</script>
</head>

<body>

Esta es la ventana del popup

<form>
<input type=button value="Cerrar" onclick="cerrarse()">
</form>

</body>
</html>


Contine tan solo una función para cerrarse ella misma, que lo único que hace es ejecutar el método close() sobre su propio objeto window. También hemos colocado un botón que se ha configurado para llamar a la función que cierra la ventana cuando se le haga clic.

El ejemplo sobre cerrar ventanas se puede ver aquí.

Un detalle sobre cerrar ventanas

En cualquier momento podemos cerrar una ventana secundaria utilizando el método close() del objeto window. En el ejemplo anterior hemos visto cómo se cierran ventanas y es muy sencillo. En cualquier momento podemos cerrar una ventana, pero si intentamos cerrar una ventana que no se ha abierto con Javascript (sin utilizar window.open()) nos saldrá una caja de confirmación que pregunta al usuario si de verdad quiere cerrar la ventana.

Podemos ver esta caja de confirmación al pulsar el botón siguiente, que intentará cerrar esta ventana.
Nota: La caja de confirmación que hemos podido ver aparece como elemento de seguridad, para evitar que un programador malicioso intente cerrar una ventana que hemos abierto nosotros como usuarios y que, en teoría, no tiene permiso para cerrar. Así que a partir de determinado navegador decidieron preguntar al usuario si realmente desea que se cierre esa ventana.

De todos modos, las cosas pueden variar de unos casos a otros, ya que en Netscape 7 ya no preguntan si se desea de verdad cerrar la ventana. Por su parte, si en Internet Explorer 6 la ventana se abrió con un enlace HTML con el atributo target="_blank" tampoco aparece la ventana de la que estamos hablando.


Es sólo un detalle que no tiene mucha importancia, pero para las personas que nunca han experimentado con el trabajo con ventanas secundarias en Javascript, resultará sorprendente que el navegador haga esa pregunta, que probablemente nunca hayamos visto. Una cosa más, sólo ocurre esto en navegadores modernos, aunque actualmente le va a pasar a casi todos los usuarios.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

abraham

15/12/2003
Con marcos no funciona, he intentado abrir una ventana secundaria con 3 marcos por ejemplo y en uno de los marcos un botón cerrar pero no consigo cerrarla.

Israel Grijalva

20/2/2004
Para poder cerrar la ventana desde alguno de los frames, debes especificar que quieres cerrar la ventana principal, en otras palabras tienes que poner window.parent.close().
Entonces la función quedaría asi:
<script>
function cerrarse(){
window.parent.close()
}
</script>

Sergio

20/8/2004
estoy intentando cerrar la ventana principal, cuando abre el pop-up y no lo consigo sin que me salga el mensaje de cerrar ventana.

Luis Enrique

30/1/2006
Existe alguna forma de aplicar el window.close() para cerrar una ventana desde otra?, y si existe la forma de cerrar la ventana sin que aparezca el mensaje y sin utilizar el target="_blank".

jose antonio

31/1/2006
si funciona con marcos pero en target se pone _top , a mi se me queda :

<A href="javascript:onClick=window.close();" target="_top"><IMG
alt="Cerrar Aplicación" src="IMAGENES/salir.gif"
border=0></A>

Nasser

27/3/2006
Sois los mejores. hacia mucho que buscaba solucion a esto y con vuestra ayuda lo he resuelto.
Muchas gracias.

Yeray Banot

10/5/2006
Yo tenía el mismo problema con una página que tenía tres marcos y quería cerrarla con un botón.
puedes cerrar la ventana completa ejecutando la instrucción javascript window.parent.close() desde cualquiera de los marcos.

Fenix_Xanadu

09/8/2006
Para los que preguntan de cerrar una ventana con texto o con imagen, el proceso es simple, solo pongan el texto a la imagen dentro de <a> </a> y listo:

<a onClick="cerrar_ventaana();" href="#">[cerrar]</a>

y pues como adición en Firefox no cierra la ventana que abre el popup, es mas ni preguna no hace nada, en iexplorer si pregunta.

ramiro

11/4/2007
En el ejemplo si abrimos una ventana secundaria y luego hacemos un recargar pagina en la ventana principal y queremos cerrar la ventana secundaria desde la principal(con el button) ya no podemos porque perdimos la propiedades, existe alguna posibilidad de subsanar este inconveniente , ya que yo tengo un sistema (realizado en php) y cuando el usuario se "deslogea" quiero cerrar las ventanas secundarias, pero puede darse el caso de que la ventanprincipal se recargue.
Espero que haya sido claro
saludos ramiro
pd:la unica solucion mas o menos que encontres es hacer una funcion en todas las ventanas secundaria que pregunte periodicamente si la ventana principal esta abierte en caso contrario la cierro

chaku

04/5/2007
Hola chavos, alguien podria ayudarme, mi problema es el siguiente, tengo un formato para email q abre como pop up en una ventanita, me gustaria q cuando el formato envie los comentarios se cierre la ventana automaticamente: if estado=mensaje enviado "MyWindow.close();">Cierre la ventana

mino

17/5/2007
Apoyo el último comentario... en Firefox no deja cerrar uan ventana que no se haya abierto con window.open(), en fin... seguiremos buscando...

Por cierto, en IE si la cierra pero pregunta si la quieres cerrar realmente, esa alerta se puede eliminar?

mino

17/5/2007
Consultad este enlace... os va a gustar.

http://www.programacion.net/foros/3/msg/18543/

XD

oscar verano

05/6/2007
Hola que tal, la verdad no tengo mucho conocimiento sobre javascript asi que no se si sea posible lo que les voy a preguntar:

tengo una ventana X, desde alli abro una ventana con:

eval("window.open ('"+src+"','Name_ventana','height=600, width=800, menubar=no,location=center,toolbar=no,scrollbars=yes')")

ahora quiero que esta ventana este abierta solo por determinado tiempo, no se 3 o 4 segundos unicamente, hay manera de cerrarla desde donde la mande abrir, no se estaba pensando poner en la siguiente line:

setTimeout("eval(window.close('"+src+"','RegistroCivil'),6000)")

es esto posible? o como podria hacerlo, de antemano muchas gracias

marcelo

29/7/2007
es mas limpio utilizar la funcion window.close()

Armando

30/9/2007
Yo tengo mi cogido asi, y es una ventana que abro con dos frames, con esto, desde el frame inferior puedo cerrar toda mi ventana, de echo lo copie de aqui mismo, por si les sivce

echo "<center><a href='javascript: window.parent.close();'>Cerrar</a></center>";

Juana

15/1/2008
Como hago para forzar a que el usuario cierre la ventana con ese boton sin que pueda utilizar la X del mismo navegador se puede con algun script?..Gracis..

Nicolas

11/2/2008
Muy bueno

daes

03/3/2009
yo para cerrar la ventana solo hice this.close() y fue suficiente para mi, daluos.

Jose Ojeda

07/8/2009
Cierre de Ventanas en Firefox
Les felicito por las excelentes explicaciones del manejo de ventanas. Mi duda radica en que estos comandos funcionan bien en IE 6 pero no en Firefox no me funcionan. Podrian explicar como cerrar ventanas en firefox.?

De nuevo les felicito y mil gracias

Olaf

07/8/2009
Cerrar varias ventanas con la misma sesion
Alguien sabe como puedo cerrar en el logout todas las ventanas que se abrieron con esa sesion, si existiera algo como window.close.all.sessions() <<---- Es inventado, pero si alguien sabe de algo que si existiera????

Slds

elquemas

25/8/2009
Cerrar Ventanas
este es el codigo para cerrar ventanas sin el mensaje de confirmar
window.open('login.php','SISTEMA','width=780,height=540,menubar=no,statusbar=no, scrollbars=no,toolbar=no,location=no,directories=no,resizable=no,top=0,left=0');

window.opener='';
window.opener.opener='';
window.close();

Bens

24/10/2009
Horrorosamente Exelentisimo
Muy buen aporte para los que iniciamos en la programacion con Javascript, explican de manera sencilla, directa y sin mucho técnicismo.

Solo un alma resuelta puede desbordar sabiduria sin fines de lucro...Grax

Saludos!

geider

01/7/2010
cerrar ventana que no quiere cerrar
quiero eliminar mi ventana que tiene dias que no cierra le intento con todas las formas posibles para cerrarla

Josue Natanael Contreras

26/9/2011
Buenisimo!
Buenisimo, gracias!!!

Compartir