El objeto WINDOW representa una ventana o marco del navegador. Es el elemento raíz de la estructura de objetos de cada página HTML.
Tiene definidos los eventos: onBlur, onDragDrop, onError, onFocus, onLoad, onMove, onResize, onUnload.
Propiedades del objeto WINDOW
| Arrays de elementos contenidos en la ventana actual | |
| frames | Array de marcos (frames) de la ventana actual |
| Otros atributos | |
| closed | Vale true si esa ventana ha sido cerrada |
| defaultStatus | Mensaje por defecto que se muestra en la barra de estado de esa ventana |
| document | Objeto document asociado a la ventana |
| history | Historial de URLs visitadas |
| innerHeight | Altura del área de contenido de la ventana (en pixels) |
| innerWidth | Ancho del área de contenido de la ventana (en pixels) |
| length | Número de marcos en la ventana (equivalente a frames.length) |
| location | Objeto location asociado a la ventana. Contiene información sobre el URL actual. |
| locationbar | Barra de dirección (URL) del navegador. Contiene a su vez la propiedad ‘visible’ que indica si se muestra o no la barra en la ventana actual. |
| menubar | Barra de menú del navegador. Contiene la propiedad ‘visible’ que indica si se muestra o no la barra en la ventana actual. |
| name | Nombre de la ventana |
| opener | Ventana que abrió la ventana actual a través del método open(). Por ejemplo, para saber el nombre de dicha ventana: nombre=window.opener.name; |
| outerHeight | Altura de la ventana en pixels |
| outerWidth | Ancho de la ventana en pixels |
| pageXOffset | Posición horizontal (en pixels) de la página con respecto a la ventana |
| pageYOffset | Posición vertical (en pixels) de la página con respecto a la ventana |
| parent | Representa el nombre de la ventana o marco que contiene a la ventana actual |
| personalbar | Barra de directorios del navegador |
| scrollbars | Barras de desplazamiento del navegador |
| self | Representa la ventana actual |
| status | Mensaje de la barra de estado |
| statusbar | Barra de estado de la ventana |
| top | Representa la ventana de nivel superior (raíz) en una estructura de marcos |
| window | Representa la ventana actual (como self) |
Resumen de métodos del objeto WINDOW
| Métodos | |
| alert | Muestra una ventana de mensajes. Ejemplo:if (numero>10) alert («Fuera de rango»); |
| back | Carga la URL anterior de la lista del objeto HISTORY correspondiente a la ventana de nivel superior:window.back(); |
| clearInterval | Cancela un temporizador iniciado con setInterval |
| clearTimeout | Cancela un temporizador iniciado con setTimeout |
| close | Cierra la ventana especificada (dependiendo de la seguridad implementada en cada navegador puede que sólo funcione con ventanas abiertas con el método open):otraventana = window.open(«») otraventana.close () |
| find | Busca una cadena de texto en el contenido de la ventana especificada:find (cadena, mayusculas, siguiente)Si ‘mayusculas’ es true, se lleva a cabo una búsqueda que tiene en cuenta mayúsculas y minúsculas. Si ‘siguiente’ es true, se busca la siguiente coincidencia.
Si no se especifica ‘cadena’, el navegador lanza la ventana de búsqueda. La función devuelve true si se encontró la cadena. |
| confirm | Muestra una ventana de confirmación con los botones OK y CANCEL. Devuelve ‘true’ si el usuario pulsa OK y ‘false’ en caso contrario. |
| focus | Asigna el foco a un objeto |
| forward | Carga la siguiente URL de la lista del objeto HISTORY |
| handleEvent | Llama a la función encargada de manejar el evento especificado |
| home | Carga la URL definida como ‘HOME’ en el navegador |
| moveTo | Mueve la ventana a las coordenadas especificadas:window.moveTo(25,10); |
| open | Abre una nueva ventana del navegador [*] |
| Imprime el contenido de la ventana | |
| resizeBy | Redimensiona la ventana moviendo la esquina inferior derecha a las coordenadas especificadas:window.moveTo (100,100); // redimensionar a 400×400 pixels window.resizeBy (500, 500); |
| resizeTo | Redimensiona la ventana a los nuevos valores de ancho y alto:// redimensionar a 400×400 pixels window.resizeTo (400, 400); |
| scrollBy | Desplaza el contenido de la ventana la cantidad indicada |
| scrollTo | Desplaza el contenido de la ventana |
| setInterval | Establece un temporizador cíclico que se encarga de evaluar una expresión regularmente [*] |
| setTimeout | Establece un temporizador que evalúa una expresión una vez transcurrido el tiempo asignado [*] |
| stop | Detiene el proceso de carga de la página actual |
El método open se utiliza para abrir nuevas ventanas del navegador. Los parámetros son:
open ( URL, nombre_de_la_ventana, opciones);
Las opciones se especifican mediante una secuencia de pares ‘parametro=valor‘ separados por comas (sin espacios en medio):
| Algunas opciones del método open() | |
| dependent | Crea una ventana hija de la ventana actual. Esta ventana se cerrará automáticamente cuando lo haga su ventana padre. |
| height | Altura de la ventana (en pixels) |
| location | Si es ‘yes’, crea una entrada para las direcciones (URLs) en la nueva ventana. |
| menubar | Si es ‘yes’, crea una barra de menú en la nueva ventana. |
| resizable | Si es ‘yes’, el usuario podrá redimensionar la ventana. |
| scrollbars | Si es ‘yes’, aparecerán barras de desplazamiento en la nueva ventana (cuando el documento supere las dimensiones de la misma). |
| status | Si es ‘yes’, la nueva ventana tendrá barra de estado. |
| titlebar | Si es ‘yes’, aparecerá la barra de título en la nueva ventana. |
| toolbar | Si es ‘yes’, la ventana tendrá barra de herramientas. |
| width | Ancho de la ventana (en pixels) |
Por ejemplo, para abrir una página en una nueva ventana:
window.open («pagina2.html», «ventana2» );
Una nueva ventana con barra de menú, pero sin barra de estado, ni entrada para direcciones:
window.open («pagina2.html», «ventana2», «status=no, location=no, menubar=yes»);
Si no se especifica URL, la ventana se abre sin cargar ninguna página. Si la ventana ya existe, no se borra la página que está cargada en ese momento.
El siguiente ejemplo abre una nueva ventana y construye su contenido de forma dinámica (on-the-fly):
<html>
<head>
<script language=»JavaScript»>
<!–
function abreNuevaVentana(nombreVentana)
{
// abrir una nueva ventana con el nombre pasado como parámetro
// no se especifica una URL
miVentana= open(«», nombreVentana,»width=500, height=400, status=yes, toolbar=yes ,menubar=yes»);
// Abre la corriente de datos del documento para escribir
miVentana.document.open();
// Crea el documento
miVentana.document.write(«<html><head><title>On-the-fly»);
miVentana.document.write(«</title></head><body>»);
miVentana.document.write(«<h1>Creando documentos al vuelo</h1>»);
miVentana.document.write(«<p> </p>»);
miVentana.document.write(«<p>El contenido es dinámico</p>»);
miVentana.document.write(«</body></html>»);
// cierra la corriente de datos del documento
miVentana.document.close();
}
// –>
</script>
</head>
<body>
<form><input type=button value=»On-the-fly» onClick=»abreNuevaVentana(«nueva»)»></form>
</body>
</html>
Los métodos setInterval y setTimeout permiten establecer temporizadores en la ventana. Por ejemplo, el siguiente código muestra un mensaje transcurridos 10 segundos utilizando el método setTimeout:
<html>
<head>
<script language=»javascript»>
function temporizador()
{
window.setTimeout («alert(‘Mensaje’)», 10000);
}
</script>
</head>
<body bgcolor=»#FFFFFF»>
<form method=»post» action=»»>
Muestra un mensaje dentro de 10 segundos
<input type=»button» name=»Button» value=»ok» onClick=»temporizador();»>
</form>
</body>
</html>
Para establecer temporizadores cíclicos se utiliza el método setInterval. Por ejemplo, para establecer un aviso cada 5 segundos:
window.setInterval («alert (‘Han pasado 5 segundos’)», 5000);
–
Artículo (C) Epsilon Eridani.