Window JavaScript - Modelo de Objeto do Navegador

Modelo de objeto do navegador (BR BO MO (BOM) permite que o JavaScript converse com o navegador.

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

Não existe um padrão oficial para o modelo de objeto do navegador (BOM).

Os navegadores modernos já implementaram (quase) os mesmos métodos e atributos de interação JavaScript, portanto, eles são frequentemente mencionados como métodos e atributos do BOM.

Objeto Window

Todos os navegadores suportam window Objeto. Representa a janela do navegador.

Todos os objetos JavaScript globais, funções e variáveis se tornam membros do objeto window automaticamente.

As variáveis globais são atributos do objeto window.

As funções globais são métodos do objeto window.

Até mesmo o objeto (HTML DOM) document é um atributo do objeto window:

window.document.getElementById("header");

Equivalente a:

document.getElementById("header");

Tamanho da janela

Ambos os atributos podem ser usados para determinar o tamanho da janela do navegador.

Ambos os atributos retornam tamanhos em pixels:

  • window.innerHeight - altura interna da janela do navegador (em pixels)
  • window.innerWidth - largura interna da janela do navegador (em pixels)

A janela do navegador (a visão do navegador) não inclui a barra de ferramentas e a barra de rolagem.

Para Internet Explorer 8, 7, 6, 5:

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

ou

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

Uma solução prática de JavaScript (inclusa em todos os navegadores):

Exemplo

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

Experimente você mesmo

Este exemplo mostra a altura e largura da janela do navegador (não inclui a barra de ferramentas e a barra de rolagem):

Outros métodos de janela

Alguns outros métodos:

  • window.open() - Abrir uma nova janela
  • window.close() - Fechar a janela atual
  • window.moveTo() - Mover a janela atual
  • window.resizeTo() - Redimensionar a janela atual