> Manuales > Control de ventanas secundarias, popups, con Javascript

Cerrar popups con Javascript usando el método window.close(). Cómo cerrar ventanas secundarias que hemos abierto con Javascript de forma segura.

Cerrar ventanas con Javascript

En artículos anteriores del Manual del control de popups o ventanas secundarias con Javascript hemos aprendido a abrir ventanas y configurarlas según nuestras intenciones o necesidades. Ahora vamos a aprender a cerrarlas convenientemente mediante Javascript en el momento en el que no la necesitemos más.

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 que vamos a ver consiste en 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.

Página que abre la ventana secundaria

Comenzamos viendo el código de la ventana principal, o página principal, que tiene el enlace para abrir el popup.

<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>
          <h1>
              Esta es la ventana principal
          </h1>
          <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.

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.

Ejemplo del HTML de la ventana secundaria que vamos a cerrar

Por su parte, el popup que vamos a abrir tiene un código HTML como el que sigue.

<html>
        <head>
            <title>Ventana Secundaria</title>
            <script>
            function cerrarse(){
                window.close()
            }
            </script>
        </head>
        <body>
            <h1>
                Esta es la ventana del popup
            </h1>
            <form>
                <input type=button value="Cerrar" onclick="cerrarse()">
            </form>
        </body>
    </html>
    

Contiene 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.

Diálogo de confirmación al cerrar popups

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.

El diálogo de confirmación que Javascript muestra en ocasiones se realiza 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 navegadores a otros, ya que depende del navegador el preguntar si se desea de verdad cerrar la ventana. Y como apunte, si la ventana se abrió con un enlace HTML con el atributo target="_blank" tampoco aparece el diálogo de confirmación que estamos mencionando.

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.

Solamente tienes que tener eso en cuenta: Si la ventana la abriste convenientemente con el window.open() y te guardaste la referencia a la ventana para poder cerrarla más tarde, no debería aparecer el diálogo de confirmación de cerrar la ventana.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual