El objeto Window

El objeto window representa la ventana que contiene un documento DOM; la propiedad document apunta al DOM document cargado en esa ventana. El objeto window al que pertenece un documento puede ser obtenido usando la propiedad document.defaultView.

Esta sección proporciona una pequeña referencia a todos los métodos, propiedades y eventos disponibles a través del objeto DOM window. El objeto window implementa la interfaz Window , que a su vez hereda de la interfaz,

En un navegador con pestañas, como Firefox, cada pestaña contine su propio window object (y si está escribiendo una extensión, la ventana del navegador es una ventana separada también - para más información vea Trabajar con ventanas desde el código chrome). Esto significa que el objeto window no se comparte entre diferentes pestañas de la misma ventana del navegador. Algunos métodos, como window.resizeTo y window.resizeBy se aplican sobre toda la ventana del navegador y no sobre una pestaña específica a la que pertenece el objeto window. Generalmente, cualquier cosa que razonablemente no pueda pertenecer a una pestaña, pertenece a la ventana.

Estudiamos el objeto window de Javascript que nos sirve para controlar la ventana del navegador. Detallamos sus propiedades y hacemos un ejemplo.

Es el objeto principal en la jerarquía y contiene las propiedades y métodos para controlar la ventana del navegador. De él dependen todos los demás objetos de la jerarquía. Vamos a ver la lista de sus propiedades y métodos.

Propiedades del objeto window

A continuación podemos ver las propiedades del objeto window. Hay algunas muy útiles y otras que lo son menos.

Método	Descripción
closed	Indica la posibilidad de que se haya cerrado la ventana. (Javascript 1.1).
defaultStatus	Texto que se escribe por defecto en la barra de estado del navegador.
document	Objeto que contiene el la página web que se está mostrando.
Frame	Un objeto frame de una página web. Se accede por su nombre.
frames array	El vector que contiene todos los frames de la página. Se accede por su índice a partir de 0.
history	Objeto historial de páginas visitadas..
innerHeight	Tamaño en pixels del espacio donde se visualiza la página, en vertical. (Javascript 1.2)
innerWidth	Tamaño en pixels del espacio donde se visualiza la página, en horizontal. (Javascript 1.2).
length)	Numero de frames de la ventana.
location	La URL del documento que se está visualizando. Podemos cambiar el valor de esta propiedad para movernos a otra página. Ver también la propiedad location del objeto document.
locationbar	Objeto barra de direcciones de la ventana. (Javascript 1.2).
menubar	Objeto barra de menús de la ventana. (Javascript 1.2).
name	Nombre de la ventana. Lo asignamos cuando abrimos una nueva ventana..
opener	Hace referencia a la ventana de navegador que abrió la ventana donde estamos trabajando. Se verá con detenimiento en el tratamiento de ventanas con Javascript..
outherHeight	Tamaño en pixels del espacio de toda la ventana, en vertical. Esto incluye las barras de desplazamiento, botones, etc. (Javascript 1.2)
outherWidth	Tamaño en pixels del espacio de toda la ventana, en horizontal. Esto incluye las barras de desplazamiento. (Javascript 1.2)
parent	Hace referencia a la ventana donde está situada el frame donde estamos trabajando. La veremos con detenimiento al estudiar el control de frames con Javascript..
personalbar	Objeto barra personal del navegador. (Javascript 1.2)
self	Ventana o frame actual..
scrollbars	Objeto de las barras de desplazamiento de la ventana.
status	Texto de la barra de estado.
statusbar	Objeto barra de estado del navegador. (Javascript 1.2).
toolbar	Objeto barra de herramientas. (Javascript 1.2)
top	Hace referencia a la ventana donde está situada el frame donde estamos trabajando. Como la propiedad parent.
window	Hace referencia a la ventana actual, igual que la propiedad self.

Tamaño de ventana

Se pueden utilizar dos propiedades para determinar el tamaño de la ventana del navegador.
Ambas propiedades devuelven los tamaños en píxeles:

window.innerHeight - la altura interior de la ventana del navegador (en píxeles)
window.innerWidth - el ancho interior de la ventana del navegador (en píxeles)

Otros métodos de ventana
Algunos otros métodos:

window.open() - abre una nueva ventana
window.close() - cerrar la ventana actual
window.moveTo() - mover la ventana actual
window.resizeTo() - cambiar el tamaño de la ventana actual.

<!DOCTYPE html>
<html>
<body>

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>
</body>
</html>

Ver ejemplo anterior

Al objeto window lo hemos estado usando constantemente. Representa la ventana del navegador.
window es un objeto global y tiene los siguienes métodos:

alert: Muestra un diálogo de alerta con un mensaje (a esta responsabilidad la hemos utilizado desde los primeros temas)
prompt: Muestra un diálogo para la entrada de un valor de tipo string (utilizado desde el primer momento)
confirm: Muestra un diálogo de confirmación con los botones Confirmar y Cancelar. open y close: abre o cierra una ventana del navegador.
Podemos especificar el tamaño de la ventana, su contenido, etc.
[Variable=][window.]open(URL, nombre, propiedades). Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella
desde la ventana donde la creamos, deberemos asignarle una variable, sino simplemente invocamos el método: el navegador automáticamente sabrá
que pertenece al objeto window.
El parámetro URL es una cadena que contendrá la dirección de la ventana que estamos abriendo: si está en blanco, la ventana se abrirá con una página en blanco.
Las propiedades son una lista, separada por comas, de algunos de los siguientes elementos:
• toolbar[=yes|no]
• location[=yes|no]
• directories[=yes|no]
• status[=yes|no]
• menubar[=yes|no]
• scrollbars[=yes|no]
• resizable[=yes|no]
• width=pixels
• height=pixels

Es bueno hacer notar que a todas estas funciones las podemos llamar anteponiéndole el nombre del objeto window, seguida del método o en forma resumida indicando solamente el nombre del método (como lo hemos estado haciendo), esto es posible ya que el objeto window es el objeto de máximo nivel.

Ej: valor=window.prompt("Ingrese valor","");
o
valor=prompt("Ingrese valor","");

Para reducir la cantidad de caracteres que se tipean normalmente encontraremos los programas tipeados de la segunda forma.

El siguiente programa muestra varios de los métodos disponibles del objeto window:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
function abrir()
{
var ventana=open();
ventana.document.write("Estoy escribiendo en la nueva ventana<br>");
ventana.document.write("Segunda linea");
}

function abrirParametros()
{
var ventana=open('','','status=yes,width=400,height=250,menubar=yes');
ventana.document.write("Esto es lo primero que aparece<br>"); }

function mostrarAlerta()
{
alert("Esta ventana de alerta ya la utilizamos en otros problemas.");
}

function confirmar()
{
var respuesta=confirm("Presione alguno de los dos botones");
if (respuesta==true)
alert("presionó aceptar");
else
alert("presionó cancelar");
}

function cargarCadena()
{
var cad=prompt("cargue una cadena:","");
alert("Usted ingreso "+cad);
}
</script>

<p>Este programa permite analizar la llamada a distintas responsabilidades del objeto window.</p>
<form>
<br>
<input type="button" value="open()" onClick="abrir()">
<br>
<input type="button" value="open con parámetros" onClick="abrirParametros()" >
<br>
<input type="button" value="alert" onClick="mostrarAlerta()">
<br>
<input type="button" value="confirm" onClick="confirmar()">
<br>
<input type="button" value="prompt" onClick="cargarCadena()">
</form>
</body>
</html>

Ver ejemplo anterior

El objeto Window

Método

Descripción