JavaScript Window - Browser Object Model

Browser Object Model (Browser Object Model (BOM) maakt het JavaScript mogelijk om met de browser te communiceren.

Browser Object Model (Browser Object Model (BOM))

Er bestaat geen officiële standaard voor het Browser Object Model (BOM).

Moderne browsers hebben (bijna) dezelfde methoden en eigenschappen voor JavaScript-interactie geïmplementeerd, dus het wordt vaak genoemd als methoden en eigenschappen van de BOM.

Window-object

Alle browsers ondersteunen window Object. Het vertegenwoordigt het browservenster.

Alle globale JavaScript-objecten, functies en variabelen worden automatisch leden van het window-object.

Globale variabelen zijn eigenschappen van het window-object.

Globale functies zijn methoden van het window-object.

Zelfs het (HTML DOM) document-object is een eigenschap van het window-object:

window.document.getElementById("header");

Is equivalent to:

document.getElementById("header");

Vensterafmetingen

Beide eigenschappen kunnen worden gebruikt om de afmetingen van het browservenster te bepalen.

Beide eigenschappen retourneren afmetingen in pixels:

  • window.innerHeight - de binnenhoogte van het browservenster (in pixels)
  • window.innerWidth - de binnenbreedte van het browservenster (in pixels)

Het browservenster (browser viewport) omvat geen werkbalken en schuifbalken.

Voor Internet Explorer 8, 7, 6, 5:

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

of

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

Een praktische JavaScript-oplossing (inclusief alle browsers):

Voorbeeld

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

Probeer het zelf uit

Dit voorbeeld toont de hoogte en breedte van het browservenster (exclusief de toolbar en de scrollbar):

Andere venstermethoden

Enkele andere methoden:

  • window.open() - Open een nieuw venster
  • window.close() - Sluit het huidige venster
  • window.moveTo() - Verplaatsen van het huidige venster
  • window.resizeTo() - Herstellen van de huidige venster