JavaScript Window - Browser Object Model

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 the 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");

It is equivalent to:

document.getElementById("header");

Window size

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

These two properties return the size in pixels:

  • window.innerHeight - The inner height of the browser window (in pixels)
  • window.innerWidth - The inner width of the browser window (in pixels)

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

For Internet Explorer 8, 7, 6, 5:

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

or

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

A practical JavaScript solution (including all browsers):

Example

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

Try It Yourself

This example shows the height and width of the browser window: (excluding the toolbar and scrollbar)

Other Window Methods

Some other methods:

  • window.open() - Open a new window
  • window.close() - Close the current window
  • window.moveTo() - Move the current window
  • window.resizeTo() - Resize the current window