Window

El objeto window representa la ventana que contiene un documento DOM.

Esta sección proporciona una pequeña referencia a todos las propiedades, métodos y eventos disponibles del objeto window. El objeto window implementa la interfaz Window, que a su vez hereda de la interfaz AbstractView. Algunas funciones como: globales adicionales, espacios de nombres, interfaces y constructores no típicamente asociados con el objeto window pero disponibles en éste.

El primer HTML DOM Nivel 1 (1998), definió 11 objetos HTML, los que aun son válidos en HTML5. Más tarde, en HTML DOM Nivel 3, se agregaron más objetos y colecciones.

1. Propiedades

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

No existe un estándar público que se aplique al objeto Window, pero todos los principales navegadores lo admiten.

Las propiedades HTML DOM son valores de elementos HTML que pueden: consultar, establecer o cambiar.

Propiedades de window
PropiedadDescripción
ApplicationCachesolo lectura
Closedsolo lectura, informa si la ventana esta cerrado o no.
Components?
ConsoleDevuelve una referencia al objeto window.console, que proporciona métodos para registrar información en la consola del navegador.
Content?
Controllers?
DefaultStatusEstablece o devuelve el texto predeterminado en la barra de estado de una ventana.
DevicePixelRatio?
DialogArgument?
Directories?
DocumentDevuelve el objeto window.document.
FrameElementDevuelve el elemento <iframe> en el que se inserta la ventana actual.
FramesDevuelve todos los elementos <iframe> en la ventana actual.
Global?
HistoryDevuelve el objeto window.history.
InnerHeightLa altura interna de la ventana del navegador (px)
InnetWidthEl ancho interno de la ventana del navegador (px)
LengthDevuelve el número de elementos <iframe> en la ventana actual.
LocationDevuelve el objeto window.location.
LocationBar?
LocationStoragePermite guardar pares clave/valor en un navegador web. Almacena los datos sin fecha de vencimiento.
MenuBar?
MessageManager?
NameEstablece o devuelve el nombre de una ventana.
NavigatorDevuelve el objeto window.navigator.
OpenerDevuelve una referencia a la ventana que creó la ventana.
OuterHeightDevuelve el alto de la ventana del navegador, incluidas las barras de desplazamiento.
OuterWidthDevuelve el ancho de la ventana del navegador, incluidas las barras de desplazamiento.
PageXOffsetDevuelve los px del documento actual que se ha desplazado (horizontalmente) desde la esquina superior izquierda de la ventana.
PageYOffsetDevuelve los px del documento actual que se ha desplazado (verticalmente) desde la esquina superior izquierda de la ventana.
ParentDevuelve la ventana principal de la ventana actual.
Performance?
PersonalBar?
ReturnValue?
ScreenDevuelve el objeto window.screen.
ScreenXAlias de pageXOffset
ScreenYAlias de pageYOffset
ScrollBars?
ScrollXDevuelve la coordenada horizontal de la ventana en relación con la pantalla.
ScrollYDevuelve la coordenada vertical de la ventana en relación con la pantalla.
SelfDevuelve la ventana actual
SessionStoragePermite guardar pares clave/valor en un navegador web. Almacena los datos para una sesión
SideBar?
StatusEstablece o devuelve el texto en la barra de estado de una ventana.
ToolBar?
TopDevuelve la ventana superior del navegador.

2. Métodos

En un navegador con pestañas (como todos actualmente) cada pestaña contiene su propio objeto window, es decir 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.

Un método es una acción que puede realizar sobre un elemento HTML.

Métodos de window
MétodoDescripción
Alert()Muestra una ventana de alerta.
Atob()
Back()Un paso atrás en el historial
Blur()Pone le foco en la ventana
Btoa()
ClearInterval()
ClearTimeout()
Close()Cierra la ventana actual. Ojo solo si fue abierto desde JavaScript.
Confirm()Muestra una venta con dos opciones: confirmar y cancelar.
DisparchEvent()Usada para lanzar un evento
Dump()Escribe un mensaje en la consola
EnableExtrenalCapture()?
Find()Busca una cadena en la ventana.
Focus()Pone el foco en la ventana actual.
GetAttention()?
GetAttentionWidthCycleCount()?
GetComputedStyle()Obtiene los estilos CSS calculados actuales aplicados a un elemento.
GetSelection()Devuelve un objeto window.selection que representa el rango de texto seleccionado por el usuario.
Home()Retorna el navegador a la pagina home
MatchMedia()Devuelve un objeto MediaQueryList que representa la cadena de consulta de medios CSS especificada.
Maximize()?
Minimize()?
MoveBy()Mueve una ventana en relación con su posición actual.
MoveTo()Mueve la ventana actual.
OpenDialog()?
Open()Abre un archivo en una nueva ventana.
PostMesage()?
Print()Imprime el contenido de la ventana actual.
Prompt()Muestra un cuadro de diálogo que solicita al visitante que ingrese.
ReleaseEvent()?
RemoveEventListener()?
ResizeBy()Cambia el tamaño de la ventana por los px especificados.
ResizeTo()Cambia el tamaño de la ventana actual.
RequestAnimationFrame()Solicita al navegador que llame a una función para actualizar una animación antes del próximo repintado.
Restore()?
RouteEvent()?
Scroll()Deprecated. Reemplazado por window.scrollTo().
ScrollBy()Desplaza el documento por el número especificado de px.
ScrollTo()Desplaza el documento a las coordenadas especificadas.
SetCursor()?
SetImmediate()Llama a una función o evalúa una expresión a intervalos específicos (milisegundos)
SetTimeout()Llama a una función o evalúa una expresión después de un número específico (milisegundos)
Setresizable()?
SizeToContent()?
Stop()Detiene la carga de la ventana.
UpdateCommends()?

3. Eventos

Existe un gran numero de eventos. Pueden clasificarse en tipos como: MouseEvent, DragEvent, KeyboardEvent, UiEvent, FocusEvent, etc Ademas la mayoria de ellos pertenecen al objeto window, aunque document también tiene 2 eventos.

Para ver todos los eventos disponibles.

4. Constructores

Constructores
DOMparser
GeckoActiveXobject
Image
Option
QueryInterface
XMLserializer
Worker
XPCnativeWrapper
XPCsafeJSobjectWrapper

5. Objetos

5.1 window.screen

Este objeto contiene información sobre la pantalla de usuario.

Propiedades window.screen
PropiedadDescripción
widthdevuelve el ancho de la pantalla del visitante en px.
heightdevuelve el alto de la pantalla del visitante en px.
availWidthdevuelve el ancho de la pantalla del visitante, en px, menos las características de la interfaz como la barra de tareas de Windows.
availHeightdevuelve la altura de la pantalla del visitante, en px, menos las características de la interfaz como la barra de tareas de Windows.
colorDepthdevuelve el número de bits usados para mostrar un color. 8 bits (256/VGA), 16 bits (65536) o 24 bits.
pixelDepthdevuelve la profundidad de px de la pantalla. 24 px

5.2 window.location

Se puede usar para obtener la dirección de la página actual (URL) y redirigir el navegador a una nueva página.

window.location.propiedad;
location.propiedad;

Propiedades de window.location
PropiedadDescripción
hrefdevuelve el href (URL) de la página actual.
hostnamedevuelve el nombre de dominio del servidor web.
pathnamedevuelve la ruta y el nombre de archivo de la página actual.
protocoldevuelve el protocolo web usado (http: o https:)
hash
host
port

Metodos de window.location
MetodoDescripción
assign('URL')carga un nuevo documento.
reload()
replace('URL')

<button onClick="document.getElementById('ej1').innerHTML = 'Pagina es: ' + window.location.href;">Ejemplo 1</button>
<button onClick="window.location.assign('js110a.htm')">Ejemplo 2</button>

5.3 window.history

Este objeto tiene el historial del navegador.

window.history.método;
history.método;

Propiedades de window.location
PropiedadDescripción
length
currebt
next
previous

Métodos de window.history
MetodoDescripción
back()igual que volver a hacer clic en el navegador.
forward()igual que hacer clic en el navegador hacia adelante.
go('URL')

<button onClick="window.history.back()">Atras</button>
<button onClick="window.history.forward()">Adelante</button>

5.4 window.navigator

Este objeto contiene información sobre el navegador del visitante.

window.navigator.propiedad;
navigator.propiedad;

Propiedades de window.navigator
appNamepropiedad devuelve el nombre de la aplicación del navegador.
appCodeNamepropiedad devuelve el nombre del código de la aplicación del navegador.
appVersionpropiedad devuelve información sobre la versión del navegador.
productpropiedad devuelve el nombre del producto del motor del navegador.
platformpropiedad devuelve el nombre del producto del motor del navegador. Sistema operativo.
onLinepropiedad devuelve verdadero si el navegador está en línea.
cookieEnableddevuelve verdadero si las cookies están habilitadas, de lo contrario falso.
userAgentpropiedad devuelve el encabezado de agente de usuario enviado por el navegador al servidor.
languagepropiedad devuelve el idioma del navegador.
javaEnabled()método que devuelve verdadero si Java está habilitado.

5.5 window.alert()

A menudo se usa un cuadro de confirmación si desea que el usuario verifique o acepte algo. Cuando aparece un cuadro de confirmación, el usuario tendrá que hacer clic en "Aceptar" o "Cancelar" para continuar. Si el usuario hace clic en "Aceptar", el cuadro devuelve verdadero. Si el usuario hace clic en "Cancelar", el cuadro devuelve falso.

window.alert('texto');
alert('texto');

<Script>
   if (confirm('Presiona un boton')){
      txt = 'Presionaste aceptar';
   }else{
      txt = 'resionaste cancelar';
   }
</Script>

5.6 window.prompt()

A menudo se usa un cuadro de aviso si desea que el usuario ingrese un valor antes de ingresar a una página. Cuando aparece un cuadro emergente, el usuario tendrá que hacer clic en "Aceptar" o "Cancelar" para continuar después de ingresar un valor de entrada. Si el usuario hace clic en "Aceptar", el cuadro devuelve el valor de entrada. Si el usuario hace clic en "Cancelar", el cuadro devuelve nulo.

window.prompt('texto');
prompt('texto');

<Script>
   var persona = prompt('Por favor ingresa tu nombre','Harry Potter');
   if (persona == null || persona == '')){
      txt = 'Usuario no quizo responder.';
   }else{
      txt = 'Hola ' + persona + '\ncomo estas hoy ?';
   }
</Script>

5.7 window.setTimeout() y setInterval()

Se llaman objetos de sincronizacion porque permiten ejecutar código a intervalos predefinidos.

window.setTimeout(funcion,milisegundos);
window.setInterval(funcion,milisegundos);
window.clearTimeout(variable);
window.clearInterval(variable);

setTimeout()
Ejecuta una función, después de esperar un número específico de milisegundos.
setInterval()
Igual que setTimeout (), pero repite la ejecución de la función continuamente.
clearTimeout()
Método() que detiene la ejecución de la función especificada setTimeout().
clearInterval()
Método que detiene las ejecuciones de la función especificada setInterval().

En este ejemplo tardamos 3 segundos en levantar una ventana emergente.

<button onclick="setTimeout(tarda, 3000);">Ejemplo</button>
<Script>
   funtion tarda(){
      alert('Hola...');
   }
</Script>

En este ejemplo mostramos un reloj que podemos parar (solo funciona una vez).

<span id=demo></span> <button onclick="clearInterval(reloj)">Parar</button>
<Script>
   var reloj = setInterval(muestra,1000);
   funtion muestra(){
      var r = new Date();
      document.getElementById('demo').innerHTML = r.toLocaleTimeString();
   }
</Script>

5.8 window.console

El objeto consola proporciona acceso a la consola de depuración del navegador.

window.console.metodo();

Métodos de window.console
assert()Escribe un mensaje de error en la consola si la afirmación es falsa.
clear()Limpia la consola.
count()Registra el número de veces que se ha llamado a esta llamada particular a console.count().
error()Envía un mensaje de error a la consola.
group()Crea un nuevo grupo en línea en la consola. Esto sangra los siguientes mensajes de la consola en un nivel adicional, hasta que se llame a console.groupEnd()
groupCollapsed()Crea un nuevo grupo en línea en la consola. Sin embargo, el nuevo grupo se crea contraído. El usuario deberá usar el botón de divulgación para expandirlo.
groupEnd()Sale del grupo en línea actual en la consola.
info()Envía un mensaje informativo a la consola.
log()Envía un mensaje a la consola.
table()Muestra datos tabulares como una tabla.
time()Inicia un temporizador (puede rastrear cuánto tiempo lleva una operación).
timeEnd()Detiene un temporizador que fue iniciado previamente por console.time().
trace()Emite un seguimiento de pila a la consola.
warn()Envía un mensaje de advertencia a la consola.

6. Ejemplos

Algunos ejemplos específicos.

6.1 Ejemplo 1

Solo se puede cerrar una ventana que fue abierta desde JavaScrip. A continuación hay dos botones una de abrir (funciona) y otro de abrir que no funcionara en esta pagina pero si en la pagina abierta con el botón