JavaScript Window - browserobjektmodellen

Browser Object Model (Browser Object Model (BOM) allows JavaScript to communicate with the browser.

Browser Object Model (BOM)

There is no official standard for the Browser Object Model (BOM).

Modern browsers have (almost) implemented the same methods and properties for JavaScript interaction, so it is often mentioned as methods and properties of BOM.

Window object

All browsers support window Object. It represents the browser window.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the (HTML DOM) document object is a property of the window object:

window.document.getElementById("header");

Is equivalent to:

document.getElementById("header");

Window size

Both properties can be used to determine the size of the browser window.

Both properties return dimensions in pixels:

  • window.innerHeight - Browser window inner height (in pixels)
  • window.innerWidth - Browser window inner width (in pixels)

Browser window (browser viewport) does not include the toolbar and scrollbars.

For Internet Explorer 8, 7, 6, 5:

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

eller

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

En praktisk JavaScript løsning (inklusive alle browsere):

Eksempel

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

Prøv det selv

Dette eksempel viser browservinduets højde og bredde: (uden værktøjslinje og rullemarker)

Andre vindue metoder

Nogle andre metoder:

  • window.open() - åbn et nyt vindue
  • window.close() - luk den aktuelle vindue
  • window.moveTo() - flyt den aktuelle vindue
  • window.resizeTo() - juster den aktuelle vindue