JavaScript Window - modelo de objeto del navegador

Modelo de objeto del navegador (Browser Object Model (BOM) permite que JavaScript hable con el navegador.

Modelo de objeto del navegador (Browser Object Model (BOM))

No existe un estándar oficial para el modelo de objeto del navegador (BOM).

Los navegadores modernos ya han implementado (casi) los mismos métodos y propiedades de interacción de JavaScript, por lo que a menudo se mencionan como métodos y propiedades de BOM.

Objeto Window

Todos los navegadores lo admiten window Objeto. Representa la ventana del navegador.

Todos los objetos JavaScript globales, funciones y variables se convierten automáticamente en miembros del objeto window.

Las variables globales son propiedades del objeto window.

Las funciones globales son métodos del objeto window.

Incluso el objeto (HTML DOM) document es una propiedad del objeto window:

window.document.getElementById("header");

Equivalente a:

document.getElementById("header");

Tamaño de la ventana

Ambas propiedades se pueden usar para determinar el tamaño de la ventana del navegador.

Ambas propiedades devuelven el tamaño en píxeles:

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

La ventana del navegador (la ventana de visualización del navegador) no incluye la barra de herramientas y la barra de desplazamiento.

Para Internet Explorer 8, 7, 6, 5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

o

  • document.body.clientHeight
  • document.body.clientWidth

Una solución práctica de JavaScript (para todos los navegadores):

Ejemplo

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

Prueba personal

Este ejemplo muestra la altura y anchura de la ventana del navegador (sin la barra de herramientas y la barra de desplazamiento):

Otras métodos de ventana

Algunos otros métodos:

  • window.open() - Abrir una nueva ventana
  • window.close() - Cerrar la ventana actual
  • window.moveTo() - Mover la ventana actual
  • window.resizeTo() - Ajustar el tamaño actual de la ventana