Vamos ahora a ver como se utilizan las ventanas en JavaScript, ya que con este lenguaje de programación podemos controlar la apertura de nuevas ventanas, su tamaño, la posición…

Para ello vamos a utilizar el objeto window que como veremos en el siguiente ejemplo tiene un uso muy sencillo.

<h3 onclick="ventana()">Click aquí</h3>
<script>
function ventana(){
	window.open("","","");
}
</script>

En este código que ya debe ir pareciendonos familiar, al hacer click sobre el elemento h3 se llama a la función ventana la cual ejecuta la apertura de la ventana que tiene tres argumentos.

• El primero consiste en la url de la ventana que queremos abrir
• El segundo es una descripción de la ventana
• El tercero consiste en una serie de propiedades que nos ayudan a definir cómo queremos que sea la ventana. En el siguiente ejemplo podemos ver algunas de estas propiedades:

menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes,width=620, height=440

Aquí podemos observar como se le activa la barra de navegación, la localización, si se puede modificar el tamaño, los scrollbars, la altura y la anchura.

Tan solo con esto ya podemos crear una ventana emergente.

Aunque puede ser interesante guardar la ventana en un objeto para luego poder utilizar otras propiedades con ellas, como por ejemplo cerrarla.

Para ello es tan sencillo como modificar el código por el siguiente:

<h3 onclick="ventana()">Click aquí</h3>
<script>
function ventana(){
	mi ventana = window.open("","","");
}
</script>

Con esto ya tenemos lo que necesitamos para poder incluir nuevas propiedades, como por ejemplo…

Cerrar una ventana

Para cerrar ventanas en JavaScript, tan solo debemos de crear otra acción (aunque nosotros estemos usando onclick se pueden usar otras) que llame al objeto y cerrar la ventana cómo vemos en el ejemplo que estamos trabajando:

<h3 onclick="ventana()">Click aquí</h3>
<h3 onclick="cerrar()">cerrar</h3>
<script>
function ventana(){
	miVentana = window.open("","","");
}
function cerrar(){
	miVentana.close();
}
</script>

Aquí creamos el objeto miVentana al realizar el evento determinado y al cerrarla llamamos al objeto aplicando la propiedad close() lo cual hace que se cierre la ventana.

Moviendo ventanas

Del mismo modo que podemos cerrar ventanas, podemos moverlas de sitio por medio de los eventos, en el siguiente ejemplo en el cual vemos también como escribir en la ventana y como hacer un focus en la misma, podemos observar que el procedimiento de mover una ventana de sitio es exactamente igual que el de cerrarlas:

<h3 onclick="ventana()">Click aquí</h3>
<h3 onclick="cerrar()">cerrar</h3>
<h3 onclick="mover()">Mover</h3>
<script>
function ventana(){
	miVentana = window.open("","","width=400, height=400");
	miVentana.document.write("Esta es una ventana nueva");
}
function cerrar(){
	miVentana.close();
}
function mover(){
	miVentana.moveTo(200, 300);
	miVentana.focus();
}
</script>

La propiedad moveTo(), recibe dos argumentos siendo estos los de las coordenadas X e Y de la pantalla.

Recuerda que las coordenadas se cuentan desde la esquina superior derecha!!

Cambiar el tamaño de una ventana

También se puede cambiar el tamaño de las ventanas en javascript, para ello y siguiendo el procedimiento que hemos visto a lo largo de toda la entrada lo haremos por medio del objeto que hemos creado y de una propiedad; en este caso resizeTo() que tiene como argumentos la nueva medida  de la ventana.

De esta forma dejamos el script completo por si necesitáis verlo en funcionamiento, utilizarlo o despiezarlo…

<h3 onclick="ventana()">Click aquí</h3>
<h3 onclick="cerrar()">cerrar</h3>
<h3 onclick="mover()">Mover</h3>
<h3 onclick="size()">Tamaño</h3>
<script>
function ventana(){
	miVentana = window.open("","","width=400, height=400");
	miVentana.document.write("Esta es una ventana nueva");
}
function cerrar(){
	miVentana.close();
}
function mover(){
	miVentana.moveTo(200, 300);
	miVentana.focus();
}
function size(){
	miVentana.resizeTo(600, 600);
	miVentana.focus();
}
</script>

Con esto se obtienen los conceptos básicos para poder trabajar con ventanas y hacer que estas puedan mostrar información adicional, desviar la atención del usuario hacia donde necesitemos…