Javascript: El objeto window

Como ya comentamos en la entrada dedicada a DOM, el objeto window y sus propiedades y métodos asociados nos permiten la interacción con el navegador, mientras que los objetos de la jerarquía DOM (los qe están por debajo del objeto document en la jerarquía) nos permiten interactuar con el documento en si.

También comentamos que el objeto window es la raíz de la jerarquía, lo cual significa que todos los objetos de la jerarquía ‘derivan’ de window y que las variables globales se consideran propiedades de window.

Cada una de las ventanas (y de los marcos) en un navegador web esta representado por un objeto window que es la raíz de su propia jerarquía y el objeto global. El que window sea el objeto global significa que cuando no se indica que una propiedad o método pertenece a un objeto se comprueba si pertenece a window, por lo que si tenemos una propiedad window.propiedad por ejemplo, podemos ahorranos el indicar que propiedad pertenece al objeto window y escribir simplemente propiedad.

Vamos a ver algunos de los métodos y propiedades mas interesantes de window através de ejemplos. Lo primero que vamos a ver es como interactuar con el usuario mediante tres métodos de window: alert(texto a mostrar) que simplemente muestra un diálogo con el texto que se le paso como parámetro, prompt(texto a mostrar, valor inicial) que de igual forma que alert muestra un texto al usuario, pero incluye una caja de texto para permitir al usuario introducir una respuesta (y devuelve como valor de retorno lo que halla escrito el usuario) y confirm(texto a mostrar) que muestra una ventana de confirmación y devuelve true o false dependiendo de si el usuario pulsó aceptar o cancelar respectivamente. Veamos un ejemplo:

Código
“window.alert(“Esto es un ejemplo del metodo alert”);
window.alert(“Encantado de conocerte ” + window.prompt(“Y este de prompt, para preguntarte por ejemplo como te llamas”,”Este texto será el que se verá en la caja de texto por defecto”));
/*Cuando los métodos o propiedades pertenecen al objeto global no hace falta poner el nombre del objeto antes. Podemos escribir simplemente el nombre del método o propiedad*/
if(confirm(“¿Sabías que para window se puede omitir el objeto sobre el que se hace la llamada? Esto es así porque window es el objeto global”))
alert(“¿Si lo sabías? Que inteligente”);
else
alert(“Bueno, pues ya lo sabes.”);

Para ver este pequeño script en acción pulsa aquí.

Podemos crear ventanas usando el método open del objeto window actual

Código
window.open(URL, nombre de la ventana, características, reemplazar entrada actual del historial);

que crea una ventana con las propiedades definidas en sus parámetros y devuelve una referencia a la ventana creada. Las características son una lista de valores separados por comas para los siguientes atributos (no son todos los que son, IE por ejemplo tiene left y top para especificar las coordenadas en que se mostrará la ventana):

  • location, determina si la nueva ventana debe o no tener una barra de dirección (yes o no)
  • menubar, determina si la nueva ventana debe o no tener una barra de menú (yes o no)
  • scrollbars, mostrar o no las barras de desplazamiento (yes o no)
    status, mostrar o no la barra de estado (yes o no)
  • toolbar, le indicamos si queremos que la ventana tenga barra de herramientas (yes o no)
  • resizable, establecemos si la ventana puede redimensionarse por el usuario (yes o no)
  • height, alto de la ventana en pixels.
  • width, ancho de la ventana en pixels.

n opcionales. Si no especificamos una dirección URL, simplemente se abrirá una ventana vacía; si no especificamos las características de la ventana se le dará un tamaño, posición y características estándar.

En el caso de que el segundo argumento, el nombre de la ventana (cuidado porque el nombre de la ventana no se refiere al título. Se usa como target para enlaces o formularios), sea el nombre de una ventana que ya existe, simplemente se devolverá una referencia a la ventana ya existente, no se creará una nueva ventana. El cuarto argumento de open solo tiene sentido en este caso y especifica si se debe crear una nueva entrada en el historial (false) o reemplazar la entrada actual (true). Veamos un ejemplo:

Código
var ventanaGoogle = window.open(‘http://www.google.com/’,”,’location=no, menubar=no, scrollbars=no, status=no, toolbar=no, resizable=no, height=100, width=100′);
//ventanaGoogle también es un objeto de tipo window, por lo que también tiene un método open
ventanaGoogle.open(‘http://mundogeek.net/’);

Para mover o redimensionar una ventana una vez ha sido creada se utilizan los métodos moveBy(desplazamientoX, desplazamientoY) para desplazar la ventana la cantidad de pixeles especificados como argumentos; moveTo(x, y) para desplazar la ventana a las coordenadas especificadas y resizeBy(diferenciaAncho, diferenciaAlto) y resizeTo(ancho, alto) para redimensionar la ventana indicando en el primer caso la diferencia en pixeles con el tamaño actual (positivo si queremos agrandarla y negativo si queremos hacerla mas pequeña) y en el segundo caso las medidas exactas. Además window.sizeToContent() redimensionaría la ventana según el contenido de la misma.

Como ejemplo, si hacemos click sobre este enlace el tamaño de la ventana cambiará a 300×300, es decir el código es resizeTo(300,300). Si pulsamos sobre este otro que ejecuta el código moveBy(100,100); la ventana se moverá 100 pixeles hacia abajo y 100 hacia la derecha.

Para terminar con los métodos de window, algunos de los mas interesantes que aún no hemos comentado son blur(), que quita el foco de la ventana actual; focus(), que hace lo contrario, nos da el foco; back() y forward() con los que nos movemos hacia atrás y hacia delante en el historial y por último close(), que cierra la ventana.

Una vez vistos los métodos mas importantes, vamos ahora con las propiedades. Una de las mas importantes es el objeto navigator, que encapsula información sobre el navegador que utiliza el usuario. Sus propiedades mas importantes son appName, una cadena que representa el nombre del navegador; appVersion, la versión del navegador, userAgent, cookieEnabled, un booleano que informa si las cookies están activadas; language, que devuelve una cadena compuesta por un par de caracteres que identifica el idioma; oscpu, el sistema operativo que el usuario utiliza y plugins, un array de objetos plugin en el que se indican los plugins soportados por el navegador.

Veamos un ejemplo que simplemente muestre en pantalla la información del usuario:

Código
var texto = “Utilizas el navegador ” + window.navigator.appName + ” versión ” + navigator.appVersion + ” bajo el sistema operativo ” + navigator.oscpu;
alert(texto);

Para ver que mostraría ese alert pulsa aquí.

Otro objeto interesante es screen, que nos proporciona información sobre la resolución (mediante las propiedades width y height) y profundidad de color (con la propiedad colorDepth) del usuario. Por ejemplo:

Código
alert(‘La resolución de la pantalla es de ‘ + window.screen.width + ‘x’ + screen.height + ‘ con una profundidad de color de ‘ + screen.colorDepth + ‘ bits’);

Tenemos también entre los objetos ‘derivados’ de window el objeto location, que nos permite obtener o modificar la dirección web en la que se encuentra el usuario:

Código
alert(‘Ahora estamos en la web ‘ + window.location);
//y ahora nos movemos a google
window.location = ‘http://www.google.com/’;

Ejemplo (cuidado, si pulsas te llevará a google)

Para terminar con esta pequeña introducción a las propiedades y métodos de window las últimas propiedades que quedaban en el tintero:

  • document, raíz de la jerarquía DOM y que veremos en próximas entradas. Es una referencia al documento que muestra la ventana del navegador correspondiente.
  • opener, una referencia al objeto de tipo window que creó la ventana actual.
  • parent, si la ventana es un marco (los marcos también son objetos window) devuelve una referencia a la ventana o marco en que está contenido. Si es una ventana devuelve una referencia a si mismo.
  • self, una referencia a la propia ventana.
  • status, texto de la barra de estado.
Comentarios
  1. toga

    😯 gracias compa esto fue una gran ayuda

    Responder

  2. nada. me alegro de que te resultara útil 🙂

    Responder

  3. Muy útil, de fácil comprensión

    Responder

  4. gracias por la ayuda, aunque podrías poner unos ejemplitos….

    pero me ha ayudao asias

    Responder

  5. Yoania

    Gracias todo muy interesante.
    Quisiera saber si es posible ponerle el título que yo quiera a la ventana cuando utilizo el window.alert?

    Gracias

    Responder

  6. Yo tengo una duda, ¿como puedo cambiar el titulo que aparece en la barra azul de la ventana, para que no me ponga la ruta de la imagen que abro?
    Gracias.
    Un saludo.

    Responder

  7. queria preguntar lo mismo que algunos aca arriba… como puedo cambiar el title del window.alert…
    Gracias.

    Responder

  8. Giselle

    Yo tengo duda en cuanto a cuando se abre la ventana como cambiarle el titulo a la ventana????

    gracias y salu2

    Responder

  9. Zamos

    Necesito saber si las caracteristicas de una ventana que se ponen en el método opener (toolbar, menubar, status) se pueden modificar en una ventana ya abierta.
    Ej: Quitar la barra de herramientas mediante codigo en una ventana ya abierta.

    Saludos.

    Responder

  10. Diana

    Hola, alguien sabe como refrescar la url que muestra el navegador, pero sin refrescar el contenido de la ventana? (realmente lo necesito para un sitio que estamos terminando en la empresa que trabajo, por el ssl y un frame en el que está corriendo, al correr sobre un frame no se actualiza nunca la url del navegador, por ende no se ve el https ni el candadito de ssl).
    Desde ya muchas gracias.

    Diana

    Responder

  11. gildardo

    No me funciona el redimensionar pantalla. La pantalla es una window.showModalDialog en la cual abro un frame que contiene una pantalla aspx.
    ¿Qué puedo hacer para que me funcione cada vez que realizo un evento?

    Responder

  12. Emilio Viguri

    Hola yo quisiera saber como puedo hacer que al momento de poner un alert(‘hola’); le ponga en el titulo (La pagina lo saluda), normalmente aparece (La pagina http:… le dice:) y quiero personalizar ese titulo como puede ser ?

    Responder

  13. rrea

    tengo la misma duda de Zamos, todo me funciona muy bien con el metodo window.open, sin embargo omitir las barras (en especial la de direcciones) es por seguridad y usuarios suspicaces podrian digitar la url de la nueva ventana que se abre en el pop up y asi ingresaria al recurso visualizando las barras del navegador. Me gustaria que alguien me orientara para lograr omitir las barras de una ventana a la que estoy accediendo digitando directamente la url

    Responder

  14. rrea, ocultar la barra de direcciones no sirve para impedir al usuario cambiar de url. Es muy sencillo volver a mostrarla o simplemente usar un navegador (como Firefox) que permita seleccionar si queremos que JavaScript pueda ocultar barras o redimensionar ventanas.

    Responder

  15. rrea

    zootropo, tienes la razon, sin embargo deseo ocultar esta barra como una medida de precaucion leve, ya he implementado en la aplicacion una manera de cargar la pagina, a partir de un redirect o link en una pagina inicial, en modo presentacion, esto se logra con los parametros channelmode=yes,fullscreen=yes,type=fullWindow como tercer argumento del metodo window.open, y funciona muy bien en IE e igualmente bien en Firefox. Sin embargo, y sabiendo que no es una medida drastica de seguridad, si me gustaria saber si es posible llevar a modo fullscreen una pagina a la cual accedo digitando directamente la url

    Responder

  16. Prueba a pasarle el argumento location=no a window.open, rrea

    También puedes usar menubar=no, status=no y toolbar=no para eliminar la barra de menús, de estado y de herramientas

    Responder

  17. María

    Hola! Realmente está muy bueno tu artículo… Quisiera hacer un comentario, a ver si tienes solución de algo que estoy buscando y es lo siguiente… En Internet Explorer 7 y en la versión beta de Mozilla Firefox (no sé si sucede n el resto de los navegadores), aunque coloque “location=no” sigue mostrando la barra de dirección en la ventana… Para mí es importante que no aparezca…

    Responder

    • GBF

      Hola, a mi me pasa lo mismo de “location=no”. Has conseguido solucionarlo?

      Responder

  18. marujaja

    Tengo un sistema de informacion y deseo que se despliegue en un popup, he utilizado varios scripts de la web y efectivamente se abre un popup, sin embargo solo se muestra el html que esta en el contenedor base y no se muestra mi menu y formulario que esta en subtemplates, la aplicacion esta hecha con php y con framework mojavi, y creo que por el uso de subcontenedores es que no me funciona el javascript, espero pronta ayuda..gracias

    Responder

  19. Charo

    Hola buenas tardes, existe alguna forma de saber si una ventana está maximizada o no?
    gracias de antemano

    Responder

  20. luis

    al abreri una nueva ventana con una url externa y luego quiero obtener la url de esa ventana me da un error de acceso denegado, alguien me podria ayudar, e buscado y dicen que es por seguridad pero yo solo quiero obtener la url y no modificar nada de la pagina externa.

    Responder

  21. Becky

    Hola, necesito saber el URL de una pagina contenedora de un iframe y para ello utilizo la funcion
    window.parent.location, y si se trata de una misma pagina esto funciona de maravilla, pero cuando se trata
    de una pagina digamos “Externa” es decir tengo la pagina http://www.ejemplo.com y dentro de el tengo una
    iframe a la pagina http://www.ejemplo2.com cual hago el window.parent.location salta el siguiente error “Permiso denegado para recuperar la propiedad”
    existe forma de obtnener el url del padre o pagina contenedora? muchas gracias por la ayuda

    Responder

  22. quisiera saber sobre mi edad y como se formatea para ganarme unos cuantos cahuelos o soles que no tengo para la comida estoy ratitica y necesitada mandame una colaboracion

    Responder

  23. Adolfo

    No sirve location=no como quito la barrar de direcciones

    Responder

  24. y como ago para ver el voton de no me gusta en el facee me dejo esta direccion

    Responder

  25. para probar

    Responder

  26. CarlosCH

    No funciona location=no como hago para quitar o no mostrar la barra de direcciones??? o para que no se pueda copiar el contendio de la misma???

    Responder

  27. Julio

    Muchas gracias muy útil

    Responder

  28. borja

    http://writecodeonline.com/javascript/

    Para que pruebes tus codigos. Genial

    Gracias por la ayuda

    Responder

Deja un comentario