Ir directamente al contenido de esta página

codexexempla.org

Ejemplos de los métodos y propiedades del objeto Window

Propiedades de la ventana

En la tabla siguiente muestro el valor de las propiedades de la ventana actual:

Valores de las propiedades de la ventana actual
Nota: Los valores variarán al modificar el tamaño de la ventana.
screenX/screenLeft
screenY/screenTop
innerHeight/offsetHeight
innerWidth/offsetWidth
outerHeight
outerWidth

Los métodos para moverla y redimensionarla

En cuanto a los métodos, aunque funcionan en los navegadores actuales, hay una serie de comportamientos que son particulares a cada uno de ellos [nota: las pruebas las he realizado sobre Windows]:

Abrir y cerrar ventanas

El código que empleo para abrir la ventana para las pruebas de Opera es el siguiente:


    var nueva_ventana = window.open('prueba_opera.htm','prueba','width=600px,height=450px,top=50px,left=50px,menubar=yes,resizable=yes,location=yes,scrollbars=yes,status=yes,toolbar=yes');
        

El primer parámetro —prueba_opera.htm— es la página que deseo abrir, el segunto, —prueba—, es un nombre que doy a la nueva ventana por si tengo que hacer referencia a ella posteriormente, y el tercero es una serie de propiedades para la nueva ventana:

No obstante, hay que tener en cuenta que la apertura de nuevas ventanas conlleva una serie de inconvenientes desde el punto de vista de la usabilidad y la accesibilidad, y que su programación debe hacerse de manera no obstrusiva.

En el caso de close(), simplemente hay que hacer referencia a la ventana que se desea cerrar y agregar el método. Por ejemplo, la ventana que se abre con este vínculo tiene un único botón que la cierra, y una única función que es ésta:


    function cerrar(){
        window.close();
    }
        

En este caso la ventana se cierra sin más porque ha sido abierta con JavaScript, pero si fuese la ventana normal el navegador lanzaría un cuadro de diálogo pidiendo confirmación de la acción, dado que cerraría el propio navegador.

Comunicación entre ventanas

Por medio de JavaScript se puede abrir una ventana nueva como acabamos de ver, pero además se puede acceder a sus funciones, variables y DOM, siempre y cuando se cumplan tres condiciones acordes con la que se conoce como política del origen idéntico, que exige:

Ahora, vamos a abrir otra ventana, y a ejecutar funciones desde ésta a ella y viceversa.

Primero, desde la nueva ventana vamos a cambiar el color de fondo y a añadir una imagen al div siguiente:

Este elemento debería cambiar de color de fondo, y debajo de este párrafo debería aparecer una imagen…

La función que nos permite hacer esto —y que se encuentra en la nueva ventana— es la siguiente:


    function anadir(){
        var elDiv = window.opener.document.getElementById('destino-imagen');
        elDiv.style.backgroundColor = '#FFC';
        var imagen = document.createElement('img');
        imagen.src='imagenes/espiral.jpg';
        elDiv.appendChild(imagen);
    }
        

La línea importante es la primera, donde accedemos al documento de la ventana padre por medio de la propiedad opener de la nueva ventana. Con window.opener.document ya estoy apuntando al documento de origen de la misma, y puedo acceder a todo su contenido.

Ahora vamos a eliminar el botón de la ventana hija y a cambiar colores y añadir la imagen:

Acceder al documento de la ventana hija es más simple aún. Como la he abierto con una línea como la siguiente:


    ventana_hija = window.open('prueba_comunicacion.htm','hija','width=400px…
        

simplemente puedo acceder a él por medio del nombre de la variable que he asignado: ventana_hija.document. Desde ese punto ya puedo trabajar con todos los métodos del DOM.

Internet Explorer 6 y 7 tienen algún que otro problema a la hora de modificar el DOM de otro documento, por lo que el ejemplo anterior en estos navegadores sólo permite modificar el color del elemento, pero no incluir la imagen.

Como ya he indicado antes, todo esto es posible porque estamos cumpliendo con la política del origen idéntico.

Ciertamente, nada impide cargar en la ventana abierta un documento de un dominio distinto, pero en ese caso no se puede alterar su contenido de manera alguna. Vamos a abrir la página de Stylegala, y ahora vamos a intentar acceder a una variable de su script, pluginFound, a cambiar el color de su fondo, o simplemente a leer el contenido de su primer h1. Como se ve, la página se carga correctamente, pero el navegador nos avisa de que estamos intentando una acción ilegal:

Avisos de las acciones ilegales en la consola de error de JavaScript de Firefox 2

Safari 3.1 permite leer los contenidos solicitados, aunque no la modificación del estilo de la página.

Volver al curso

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