JavaScript Window - Browser Object Model

The Browser Object Model (BOM) enables JavaScript to "talk" with the browser.

Browser Object Model (BOM)

Browser Object Model (Browser Object Model (BOM)) has no official standard yet.

Since modern browsers have (almost) implemented the same methods and properties for JavaScript interactivity, they are often considered to be BOM methods and properties.

Window Object

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

All JavaScript global 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 document of the HTML DOM is one of the properties of the window object:

window.document.getElementById("header");

Same as:

document.getElementById("header");

Window Size

There are three methods that can determine the size of the browser window.

For Internet Explorer, Chrome, Firefox, Opera, and Safari:

• window.innerHeight - The inner height of the browser window (including scrollbar)
• window.innerWidth - The inner width of the browser window (including scrollbar)

For Internet Explorer 8, 7, 6, 5:

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

Or

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

A practical JavaScript solution (covering all browsers, including IE8 and earlier versions):

This example displays the height and width of the browser window.

Other Window Methods

Some other methods:

• window.open() - Opens a new window
• window.close() - Closes the current window
• window.moveTo() - Moves the current window
• window.resizeTo() - Resizes the current window