1.1.1.- Gestión de ventanas. | DWEC03.- Modelo de objetos predefinidos en Javascript.

Ilustración de ina ventana en el ordenador. — Everaldo Coelho (GNU/GPL)

Un script no creará nunca la ventana principal de un navegador. Es el usuario, quien realiza esa tarea abriendo una URL en el navegador o un archivo desde el menú de abrir. Pero sin embargo, un script que esté ejecutándose en una de las ventanas principales del navegador, si que podrá crear o abrir nuevas sub-ventanas.

El método que genera una nueva ventana es window.open(). Este método contiene hasta tres parámetros, que definen las características de la nueva ventana: la URL del documento a abrir, el nombre de esa ventana y su apariencia física (tamaño, color,etc.).

Por ejemplo, si consideramos la siguiente instrucción que abre una nueva ventana de un tamaño determinado y con el contenido de un documento HTML:

let subVentana = window.open("nueva.html", "nueva", "height=800, width=600");

Lo importante de esa instrucción, es la asignación que hemos hecho en la variable subVentana. De esta forma podremos a lo largo de nuestro código, referenciar a la nueva ventana desde el script original de la ventana principal. Por ejemplo, si quisiéramos cerrar la nueva ventana desde nuestro script, simplemente tendríamos que hacer: subVentana.close();

Aquí si que es necesario especificar subVentana, ya que si escribiéramos window.close(), self.close() o close() estaríamos intentando cerrar nuestra propia ventana (previa confirmación), pero no la subVentana que creamos en los pasos anteriores.

Véase el siguiente ejemplo que permite abrir y cerrar una sub-ventana:

<!DOCTYPE  html>
<html>
    <head>
        <meta  http-equiv="content-type"  content="text/html;charset=utf-8">
        <title>Apertura y Cierre de Ventanas</title>
        <script type="text/javascript">
            const inicializar = () => {
                document.getElementById("crear-ventana").onclick=crearNueva;
                document.getElementById("cerrar-ventana").onclick=cerrarNueva;
            }

            let  nuevaVentana;

            const crearNueva = () =>  {
                nuevaVentana  =  window.open("http://www.google.es","","height=400,width=800");
            }

            const cerrarNueva = () =>  {
                if  (nuevaVentana) {
                    nuevaVentana.close(); nuevaVentana  =  null;
                }
            }
        </script>
    </head>
    <body onLoad="inicializar()">
    <h1>Abrimos y cerramos ventanas</h1>
    <form>
        <input  type="button"  id="crear-ventana"  value="Crear Nueva Ventana">
        <input  type="button"  id="cerrar-ventana"  value="Cerrar Nueva Ventana">
    </form>
</html>