Ir directamente al contenido de esta página
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é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 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 | Descripción | |
---|---|---|
FF, O, S | IE | |
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 3 | 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.
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 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:
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:
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é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.
moveBy
ni de moveTo
.. resizeBy
ni de resizeTo
una ventana sea menor de 100 por 100 píxeles. 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. alert(window==document)
, que en este navegador devuelve true.