Ir directamente al contenido de esta página

codexexempla.org

Window y Document

Tabla de contenidos

  1. El objeto Window
    1. Cuentas atrás e intervalos
  2. 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étodoDescripció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 usuario1.
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 1002.
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
PropiedadesDescripción
FF, O, SIE
screenXscreenLeftIndica la distancia en píxeles de la ventana al borde izquierdo de la pantalla.
screenYscreenTopIndica la distancia en píxeles de la ventana al borde superior de la pantalla.
innerWidthoffsetWidth3Indica la anchura disponible en el área visible del documento cargado.
innerHeightoffsetHeightIndica la altura disponible en el área visible del documento cargado.
outerWidthSin equivalenteIndica la anchura total de la ventana del navegador.
outerHeightSin equivalenteIndica la altura total de la ventana del navegador.
openeropenerDesde 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 DOM4.

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:

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
PropiedadDescripciónEjemplo
hashEn 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.
hostEs el nombre del servidor.En http://www.codexexempla.org/ sería www.codexexempla.org.
hostnameIgual que host pero a veces eliminando www.En http://www.codexexempla.org/ sería codexexempla.org.
hrefEs el URL completo.En http://www.codexexempla.org/index.php sería http://www.codexexempla.org/index.php.
pathnameSería la ruta tras el nombre del dominio.En http://www.codexexempla.org/
articulos/calificacion_hre.php
sería /articulos/calificacion_hre.php.
portEs el puerto especificado en la ruta.En http://www.codexexempla.org:8080/recursos/ sería 8080.
protocolEs el protocolo empleado para acceder al documento.En http://www.codexexempla.org/ sería http:.
searchSerí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étodoDescripció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

  1. Por motivos de seguridad una ventana no puede situarse fuera de la pantalla por medio de moveBy ni de moveTo.. Volver
  2. 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. Volver
  3. 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. Volver
  4. 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. Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2017 Mapa del sitio | XHTML | CSS | AA