La propiedad name del Objeto Window() nos permite obtener y asignar el nombre de una ventana.
document.write( "El nombre de la ventana es: [" + window.name + "]<br />" );
window.name = "ventana_1";
document.write( "Ahora el nombre de la ventana es: [" + window.name + "]<br />" );
Usaremos los métodos open() y close() del Objeto Window() para abrir y cerrar una ventana, respectivamente:
En open() tenemos que indicar:
URL (opcional): dirección URL o nombre del archivo de página web que se debe cargarse en la nueva ventana.
Si no la indicamos (poniendo dos comillas seguidas) se abrirá una ventana en blanco.
- nombre (opcional): nombre de la ventana.
- opciones (opcional): cadena en la que indicaremos opciones de configuración de la ventana.
- height: alto de la ventana (en píxels).
- left: margen con respecto a la parte izquierda de la pantalla (en píxels).
- location: mostrar la barra de direcciones (yes/no o 1-0).
- menubar: mostrar la barra de menú (yes/no o 1-0).
- resizable: indica si se permite redimensionar la ventana (yes/no o 1-0).
- scrollbars: mostrar las barras de scroll (yes/no o 1-0).
- status: mostrar la barra de estado (yes/no o 1-0).
- titlebar: mostrar la barra de título (yes/no o 1-0).
- toolbar: mostrar la barra de herramientas (yes/no o 1-0).
- top: margen con respecto a la parte superior de la pantalla (en píxels).
- width: ancho de la ventana (en píxels).
- replace (opcional): si el valor es 'true' se reemplazará la URL actual en el historial de navegación por la cargada en la ventana, y si es 'false' se añadirá a la lista existente.
Sólo podremos cerrar con close() las ventanas que hayamos abierto con open().
En el siguiente ejemplo creamos una variable global que al ser accesible desde cualquier punto del código JavaScript, permitirá cerrar la ventana desde cualquier lugar:
var miVentana;
function abrir() {
miVentana = window.open( "", "ventana1", "height=200,width=700,left=300,location=yes,menubar=no,resizable=no,scrollbars=yes,status=no,titlebar=yes,top=300" );
}
function cerrar() {
miVentana.close();
}
Si en lugar de cargar un archivo de página web (como 'pagina.html') o abrir una ventana vacía (como en el ejemplo anterior) indicamos una URL (como 'http://www.google.com/'), no funcionará el método close() en Internet Explorer para cerrar la ventana a no ser que carguemos la página web desde un servidor web (es decir, no funcionará si la abrimos haciendo doble clic en el archivo).
Cuando trabajamos con frames o con ventanas que abren otras ventanas, en ocasiones necesitaremos acceder a unas desde las otras, y en tales casos necesitaremos usar las siguientes propiedades del Objeto Window():
- self: hace referencia a la propia ventana en la que nos encontramos, siendo simplemente una sustitución de window.
top: hace referencia a una ventana que contiene frames (usados para cargar varias páginas web en una misma ventana).
Esta propiedad es usada desde las páginas web cargadas en dichos frames para acceder a la ventana principal. La explicamos detalladamente en la sección en la que tratamos los frames.
- opener: usada desde una ventana que ha sido creada por otra, hace referencia a la que la creó.
parent: usada desde un frame o una ventana que ha sido abierta por otra, hace referencia a su ventana padre: en el caso de ser usada en la página web contenida en un frame hace referencia a la ventana en la que se encuentra, y en caso de usarse desde una ventana que ha sido abierta por otra hace referencia a la ventana que la abrió.
La diferencia con top es que parent no siempre hará referencia a la ventana principal, ya que por ejemplo, una ventana puede abrir otra que contiene frames: para las páginas web cargadas en los frames la ventana parent sería aquella en la se encuentran, mientras que top haría referencia a la ventana principal que la abrió.
Observa cómo en el siguiente ejemplo hemos sustituido window por top para hacer referencia a la ventana en la que nos encontramos:
var miVentana;
function abrir() {
miVentana = self.open( "", "ventana1", "height=200,width=700,top=300" );
}
Dar foco a un elemento significa activarlo y/o ponerlo en primer plano. Para dar foco a una ventana disponemos del método focus() y para quitarlo usaremos blur():
En el siguiente ejemplo abrimos una ventana y a continuación le quitamos el foco, volviendo a la ventana padre:
var miVentana = window.open( "pagina2.html", "ventana1", "height=200,width=700,left=100,top=300" );
alert("Pulsa para devolver el foco a la ventana padre");
miVentana.blur();
alert("Pulsa para devolver el foco a la ventana hija");
miVentana.focus();
Al abrir una ventana debes tener en cuenta los bloqueadores de ventanas emergentes de los navegadores web.
El método blur() no funciona en los navegadores web Chrome y Opera.
Para redimensionar una ventana en JavaScript usaremos los siguientes métodos del Objeto Window():
- resizeBy(): estira la ventana al ancho y alto especificado en píxels, a partir de la esquina inferior derecha de la misma.
- resizeTo(): redimensiona la ventana al ancho y alto indicado en píxels.
alert("Pulsa para redimensionar la ventana");
window.resizeTo(300, 500);
alert("Pulsa para estirar la ventana");
window.resizeBy(200, 100);
Estos métodos no funcionan en los navegadores web Google Chrome 11 y Opera 11.
El Objeto Window() dispone de los siguientes métodos para redimensionar una ventana:
- moveBy(): mueve una ventana (no maximizada) un determinado número de píxels, partiendo desde la esquina superior izquierda. Se pueden usar valores negativos.
- moveTo(): mueve la ventana (si no está maximizada) hacia las coordenadas de pantalla que indiquemos en píxels (ancho y alto).
alert("Pulsa para mover la ventana");
window.moveTo(300, 200);
alert("Pulsa para mover la ventana");
window.moveBy(-50, 50);
Estos métodos no funcionan en los navegadores web Google Chrome 11 y Opera 11.
Si necesitamos hacer scroll en una página web< disponemos de los siguientes métodos del Objeto Window():
- scrollBy(): hace scroll en la página web tanto vertical como horizontalmente, según el número de píxels que indiquemos. Es necesario que las barras de desplazamiento estén visibles.
- scrollTo(): hace scroll hacia unas determinadas coordenadas dentro de la página web, indicadas en píxels (ancho y alto).
alert("pulsa para hacer scroll");
window.scrollTo(0,400);
alert("pulsa para hacer scroll");
window.scrollBy(0,200);
Por otro lado, disponemos de las siguientes propiedades con las que podemos obtener información acerca del scroll realizado en una página web:
- pageXOffset: devuelve el número de píxels que se ha hecho scroll horizontal, desde la esquina superior izquierda del área de visualización de la página web.
- pageYOffset: devuelve el número de píxels que se ha hecho scroll vertical, desde la esquina superior izquierda del área de visualización de la página web.
alert("pulsa para hacer scroll");
window.scrollTo(10,40);
alert( "pageXOffset: [" + window.pageXOffset + "] / pageYOffset: [" + window.pageYOffset + "]" );
Vea también: [ Dimensiones del Documento ] - [ Dimensiones de un elemento ] - [ Posición de la ventana ]
Estas dos propiedades no funcionan en Internet Explorer, en su lugar usaremos document.body.scrollLeft y document.body.scrollTop, respectivamente.
Si usamos scrollBy() y scrollTo() para hacer scroll un número de píxeles mayor al disponible en la página web, pageXOffset() y pageYOffset() devolverá el número de píxels que se ha hecho scroll.
Para averiguar la posición de una ventana con respecto a la pantalla del usuario usaremos las siguientes propiedades del Objeto Window():
- screenX: distancia en píxels entre el borde izquierdo de la ventana y el de la pantalla. No funciona en el navegador web Internet Explorer.
- screenLeft: igual que screenX, pero no funciona en el navegador web Firefox.
- screenY: distancia en píxels entre el borde superior de la ventana y el de la pantalla. No funciona en Internet Explorer.
- screenTop: distancia en píxels entre el borde superior de la ventana y el de la pantalla. No funciona en Firefox.
if( navigator.appName == "Microsoft Internet Explorer" )
alert( "screenLeft: [" + window.screenLeft + "] / screenTop: [" + window.screenTop + "]" );
else
alert( "screenX: [" + window.screenX + "] / screenY: [" + window.screenY + "]" );
Vea también: [ Dimensiones del Documento ] - [ Dimensiones de un elemento ] - [ Scroll en una página web ]
Vea también: [ Posición de un elemento ]
Con el método print() del Objeto Window() podremos imprimir la página web cargada en la ventana del navegador:
window.print();
