5.2. El objeto window (Introducción a AJAX)

El objeto window representa la ventana completa del navegador. Mediante este objeto, es posible mover, redimensionar y manipular la ventana actual del navegador. Incluso es posible abrir y cerrar nuevas ventanas de navegador.

Si una página emplea frames, cada uno de ellos se almacena en el array frames, que puede ser accedido numéricamente (window.frames[0]) o, si se ha indicado un nombre al frame, mediante su nombre (window.frames["nombre del frame"]).

Como todos los demás objetos heredan directa o indirectamente del objeto window, no es necesario indicarlo de forma explícita en el código JavaScript. En otras palabras:

window.frames[0] == frames[0]
window.document == document

BOM define cuatro métodos para manipular el tamaño y la posición de la ventana:

moveBy(x, y) desplaza la posición de la ventana x píxel hacia la derecha y y píxel hacia abajo. Se permiten desplazamientos negativos para mover la ventana hacia la izquierda o hacia arriba.
moveTo(x, y) desplaza la ventana del navegador hasta que la esquina superior izquierda se encuentre en la posición (x, y) de la pantalla del usuario. Se permiten desplazamientos negativos, aunque ello suponga que parte de la ventana no se visualiza en la pantalla.
resizeBy(x, y) redimensiona la ventana del navegador de forma que su nueva anchura sea igual a (anchura_anterior + x) y su nueva altura sea igual a (altura_anterior + y). Se pueden emplear valores negativos para reducir la anchura y/o altura de la ventana.
resizeTo(x, y) redimensiona la ventana del navegador hasta que su anchura sea igual a x y su altura sea igual a y. No se permiten valores negativos.

Los navegadores son cada vez menos permisivos con la modificación mediante JavaScript de las propiedades de sus ventanas. De hecho, la mayoría de navegadores permite a los usuarios bloquear el uso de JavaScript para realizar cambios de este tipo. De esta forma, una aplicación nunca debe suponer que este tipo de funciones están disponibles y funcionan de forma correta.

A continuación se muestran algunos ejemplos de uso de estas funciones:

// Mover la ventana 20 píxel hacia la derecha y 30 píxel hacia abajo
window.moveBy(20, 30);

// Redimensionar la ventana hasta un tamaño de 250 x 250
window.resizeTo(250, 250);

// Agrandar la altura de la ventana en 50 píxel
window.resizeBy(0, 50);

// Colocar la ventana en la esquina izquierda superior de la ventana
window.moveTo(0, 0);

Además de desplazar y redimensionar la ventana del navegador, es posible averiguar la posición y tamaño actual de la ventana. Sin embargo, la ausencia de un estándar para BOM provoca que cada navegador implemente su propio método:

Internet Explorer proporciona las propiedades window.screenLeft y window.screenTop para obtener las coordenadas de la posición de la ventana. No es posible obtener el tamaño de la ventana completa, sino solamente del área visible de la página (es decir, sin barra de estado ni menús). Las propiedades que proporcionan estas dimensiones son document.body.offsetWidth y document.body.offsetHeight.
Los navegadores de la familia Mozilla, Safari y Opera proporcionan las propiedades window.screenX y window.screenY para obtener la posición de la ventana. El tamaño de la zona visible de la ventana se obtiene mediante window.innerWidth y window.innerHeight, mientras que el tamaño total de la ventana se obtiene mediante window.outerWidth y window.outerHeight.

Al contrario que otros lenguajes de programación, JavaScript no incorpora un método wait() que detenga la ejecución del programa durante un tiempo determinado. Sin embargo, JavaScript proporciona los métodos setTimeout() y setInterval() que se pueden emplear para realizar tareas similares.

El método setTimeout() permite ejecutar una función al transcurrir un determinado periodo de tiempo:

setTimeout("alert('Han transcurrido 3 segundos desde que me programaron')", 3000);

El método setTimeout() requiere dos argumentos. El primero es el código que se va a ejecutar o una referencia a la función que se debe ejecutar. El segundo argumento es el tiempo, en milisegundos, que se espera hasta que comienza la ejecución del código. El ejemplo anterior se puede rehacer utilizando una función:

function muestraMensaje() {
  alert("Han transcurrido 3 segundos desde que me programaron");
}

setTimeout(muestraMensaje, 3000);

Como es habitual, cuando se indica la referencia a la función no se incluyen los paréntesis, ya que de otro modo, se ejecuta la función en el mismo instante en que se establece el intervalo de ejecución.

Cuando se establece una cuenta atrás, la función setTimeout() devuelve el identificador de esa nueva cuenta atrás. Empleando ese identificador y la función clearTimeout() es posible impedir que se ejecute el código pendiente:

function muestraMensaje() {
  alert("Han transcurrido 3 segundos desde que me programaron");
}
var id = setTimeout(muestraMensaje, 3000);

// Antes de que transcurran 3 segundos, se decide eliminar la ejecución pendiente
clearTimeout(id);

Las funciones de timeout son imprescindibles para crear aplicaciones profesionales, ya que permiten, por ejemplo, que un script no espere infinito tiempo para obtener el resultado de una función.

En este caso, la estrategia consiste en establecer una cuenta atrás antes de llamar a la función. Si la función se ejecuta correctamente, en cuanto finalice su ejecución se elimina la cuenta atrás y continúa la ejecución normal del script. Si por cualquier motivo la función no se ejecuta correctamente, la cuenta atrás se cumple y la aplicación puede informar al usuario o reintentar la ejecución de la función.

Además de programar la ejecución futura de una función, JavaScript también permite establecer la ejecución periódica y repetitiva de una función. El método necesario es setInterval() y su funcionamiento es idéntico al mostrado para setTimeout():

function muestraMensaje() {
  alert("Este mensaje se muestra cada segundo");
}

setInterval(muestraMensaje, 1000);

De forma análoga a clearTimeout(), también existe un método que permite eliminar una repetición periódica y que en este caso se denomina clearInterval():

function muestraMensaje() {
  alert("Este mensaje se muestra cada segundo");
}

var id = setInterval(muestraMensaje, 1000);

// Despues de ejecutarse un determinado número de veces, se elimina el intervalo
clearInterval(id);