Oggetto modello browser Window JavaScript

Browser Object Model (Browser Object Model (BOM) permette a JavaScript di interagire con il browser.

Browser Object Model (BOM)

Non esiste uno standard ufficiale per il Browser Object Model (BOM).

I browser moderni hanno (quasi) implementato i metodi e le proprietà di interazione JavaScript, quindi spesso vengono menzionati come metodi e proprietà di BOM.

Oggetto Window

Tutti i browser lo supportano window Oggetto. Rappresenta la finestra del browser.

Tutti gli oggetti JavaScript globali, funzioni e variabili diventano membri automatici dell'oggetto window.

Le variabili globali sono le proprietà dell'oggetto window.

Le funzioni globali sono i metodi dell'oggetto window.

Anche l'oggetto (HTML DOM) document è una proprietà dell'oggetto window:

window.document.getElementById("header");

Uguale a:

document.getElementById("header");

Dimensioni della finestra

Queste due proprietà possono essere utilizzate per determinare le dimensioni della finestra del browser.

Queste due proprietà restituiscono le dimensioni in pixel:

  • window.innerHeight - L'altezza interna della finestra del browser (in pixel)
  • window.innerWidth - La larghezza interna della finestra del browser (in pixel)

La finestra del browser (la vista della finestra del browser) non include la barra degli strumenti e la barra di scorrimento.

Per Internet Explorer 8, 7, 6, 5:

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

o

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

Una soluzione JavaScript pratica (inclusi tutti i browser):

Esempio

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

Prova tu stesso

Questo esempio mostra l'altezza e la larghezza della finestra del browser (esclusi la barra degli strumenti e la barra di scorrimento):

Altri metodi delle finestre

Altri metodi:

  • window.open() - Apri una nuova finestra
  • window.close() - Chiudi la finestra corrente
  • window.moveTo() - Sposta la finestra corrente
  • window.resizeTo() - Reimposta la dimensione della finestra corrente