Ir directamente al contenido de esta página
En la tabla siguiente muestro el valor 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 | |
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]:
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:
width y height son su anchura y altura.top y left son su distancia al borde superior e izquierdo de la pantalla.menubar especifica si se quiere que el menú del navegador sea visible para la nueva ventana.resizable especifica si se permite o no que la nueva ventana sea redimensionable. location especifica si se muestra o no la caja para introducir direcciones.scrollbars especifica si se permite que aparezcan barras de desplazamiento o no.status especifica si se quiere visible la barra inferior de estatus.toolbar especifica si se hace o no visible la barra de herramientas del navegador.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.
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:
Safari 3.1 permite leer los contenidos solicitados, aunque no la modificación del estilo de la página.
(cc) CodexExempla.org, 2007–2024 Mapa del sitio | XHTML | CSS | AA