Window y Document

Tabla de contenidos

El objeto Window
1. Cuentas atrás e intervalos
El objeto Document

El objeto Window

El objeto Window recoge las propiedades y métodos pertenecientes a la ventana del navegador, tales como su posición y área visible del documento cargado.

Primero veamos los métodos comunes de los navegadores actuales:

Métodos comunes del objeto *Window*
Método	Descripción
`moveBy(x,y)`	Desplaza la ventana desde su punto actual según el número de píxeles definidos en los parámetros. Para `x` los valores positivos mueven la ventana a la derecha y los negativos a la izquierda; para `y`, los positivos la mueven hacia abajo y los negativos hacia arriba.
`moveTo(x,y)`	Desplaza la ventana hasta las coordenadas indicadas en los parámetros, tomando como referencia el punto 0,0 de la pantalla del usuario¹.
`resizeBy(x,y)`	Modifica el tamaño de la ventana en la cantidad —positiva o negativa— de píxeles definidos por los parámetros, donde `x` es la anchura e `y` la altura.
`resizeTo(x,y)`	Modifica el tamaño de la ventana hasta el definido en los parámetros, donde `x` es la anchura e `y` la altura. No acepta valores inferiores a 100².
`open()`	Abre una nueva ventana del navegador.
`close()`	Cierra una nueva ventana del navegador.

Y ahora, las propiedades, que no son comunes a los navegadores más importantes:

Propiedades del objeto *Window*, en diversos navegadores
Propiedades		Descripción
FF, O, S	IE	Descripción
`screenX`	`screenLeft`	Indica la distancia en píxeles de la ventana al borde izquierdo de la pantalla.
`screenY`	`screenTop`	Indica la distancia en píxeles de la ventana al borde superior de la pantalla.
`innerWidth`	`offsetWidth`³	Indica la anchura disponible en el área visible del documento cargado.
`innerHeight`	`offsetHeight`	Indica la altura disponible en el área visible del documento cargado.
`outerWidth`	Sin equivalente	Indica la anchura total de la ventana del navegador.
`outerHeight`	Sin equivalente	Indica la altura total de la ventana del navegador.
`opener`	`opener`	Desde una nueva ventana abierta por medio de JavaScript, hace referencia a la ventana desde la que se ha abierto.

Por último, hay que indicar que existe un evento de Window, resize, que se lanza cuando el usuario modifica el tamaño de la ventana.

Veamos todo esto en funcionamiento.

Cuentas atrás e intervalos

Hay dos métodos adicionales de Window que prefiero tratar aparte en los ejemplos. El primero de ellos nos permite establecer el tiempo que ha de transcurrir hasta que se ejecute una función, y el segundo nos permite establecer un intervalo al cabo del cual una función debe repetirse: setTimeout y setInterval.

La sintaxis de ambos métodos es idéntica, ambos cuentas con dos parámetros, el primero de ellos la función que se quiere lanzar, y el segundo el tiempo en milisegundos que ha de transcurrir antes de lanzarla:


    setTimeout(función_a_lanzar,milisegundos);
    // función_a_lanzar se ejecutará una vez agotado el tiempo
    
    setInterval(función_a_lanzar,milisegundos);
    // función_a_lanzar se ejecutará cada lapso de milisegundos

Además, para ambos existen métodos de cancelación, clearTimeout y clearInterval respectivamente; pero para cancelar una cuenta o un intervalo se debe asignar el mismo a una variable con la que referenciarlo:


    var la_cuenta = setTimeout(la_funcion,1000);
    clearTimeout(la_cuenta);     
            
    var el_intervalo = setInterval(la_funcion,1000);
    clearInterval(el_intervalo);

Aquí dejo un ejemplo de setTimeout y otro de setInterval.

El objeto Document

El objeto Document hace referencia al documento mismo cargado en la ventana, y fácilmente puede confundirse con el document del que hablamos en la sección del DOM⁴.

En las primeras implementaciones de un modelo rudimentario de DOM, Document contaba entre sus propiedades con una serie de colecciones que permitían acceder a parte de su contenido:

document.anchors: Devolvía una matriz con todas las anclas del documento, es decir, todo los elementos <a name="nombre">…<a>.
document.applets: Devolvía una matriz con todos los elementos applet.
document.embeds: Devolvía una matriz con todos los elementos embed.
document.forms: Devolvía una matriz con todos los formularios.
document.images: Devolvía una matriz con todas las imágenes.
document.links: Devolvía una matriz con todos los vínculos.
document.location: Hacía referencia al URL del documento.

Hoy en día, embeds ha sido depreciado, y las demás propiedades son colecciones de nodos definidas en la interfaz HTMLDocument de DOM HTML 2 (inglés). No obstante, como hemos visto an la sección anterior del curso contamos con métodos mucho más poderosos, sofisticados y estandarizados para acceder a los mismos. Por ello sólo voy a detenerme en location.

location es un objeto dependiente de Document —aunque por la confusión debida a la falta de estándares para el BOM, lo es a la vez de Window—, y como tal posee propiedades y métodos:

Propiedades de `location`
Propiedad	Descripción	Ejemplo
`hash`	En un URL que apunta a un ancla del documento, corresponde a la parte tras el almohadillado (`#`).	En http://www.codexexempla.org/ index.php#buscar sería #buscar.
`host`	Es el nombre del servidor.	En http://www.codexexempla.org/ sería www.codexexempla.org.
`hostname`	Igual que `host` pero a veces eliminando www.	En http://www.codexexempla.org/ sería codexexempla.org.
`href`	Es el URL completo.	En http://www.codexexempla.org/index.php sería http://www.codexexempla.org/index.php.
`pathname`	Sería la ruta tras el nombre del dominio.	En http://www.codexexempla.org/ articulos/calificacion_hre.php sería /articulos/calificacion_hre.php.
`port`	Es el puerto especificado en la ruta.	En http://www.codexexempla.org:8080/recursos/ sería 8080.
`protocol`	Es el protocolo empleado para acceder al documento.	En http://www.codexexempla.org/ sería http:.
`search`	Sería la cadena adjunta a la ruta de un documento enviada como búsqueda tras el signo de interrogación (`?`)	En http://www.codexexempla.org/ buscador.php?q=mejora%20progresiva sería ?q=mejora%20progresiva.

Métodos de `location`
Método	Descripción
`assign(x)`	Asigna una nueva dirección a `location`, con lo que se provoca una redirección. `x` es el URL del nuevo documento.
`reload(x)`	Recarga el documento. `x` es un booleano: su valor `true` lo recarga del servidor, `false` de caché.
`replace(x)`	Asigna una nueva dirección a `location`, pero a diferencia de `assign()` la página reemplazada desaparece del historial del navegador.

Con diferencia este último método es el más importante, por si nos vemos obligados a hacer una redirección de un documento desde el cliente, porque ésta no pueda hacerse de ninguna manera en el lado del servidor. Sobre cómo hacerlo y cómo no, un ejemplo.

Y como introducción a ambos objetos, lo dicho basta.

Notas

Por motivos de seguridad una ventana no puede situarse fuera de la pantalla por medio de moveBy ni de moveTo..
También por motivos de seguridad no puede hacerse que por medio de resizeBy ni de resizeTo una ventana sea menor de 100 por 100 píxeles.
Siendo estrictos, esta propiedad —y offsetHeight— no debería aparecer en esta sección, porque en Explorer no son propiedades del objeto Window, sino de Document; no obstante es aquí donde tiene sentido hablar de ellas.
La confusión aumenta todavía más en Explorer, donde el objeto Window y el objeto Document son indistinguibles. Para comprobarlo, basta la línea alert(window==document), que en este navegador devuelve true.

Curso: TdC > El BOM > Window y Document [62/64]