JavaScript Window

JavaScript Window - Browser Object Model

The browser object model (BOM) gives JavaScript the ability to "talk" to the browser.

Browser Object Models (BOM)

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

Because modern browsers have (almost) implemented the same methods and properties in terms of JavaScript interactivity, they are often considered methods and properties of boms.

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 this:

document.getElementById("header");


Window dimensions

there are three ways to determine the size of a browser window.

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

  • window.innerHeight - The internal height of the browser window (including scroll bars)

  • window.innerWidth - The internal width of the browser window (including scroll bars)

For Internet Explorer 8, 7, 6, 5:

  • document.documentElement.clientHeight

  • document.documentElement.clientWidth

or

  • document.body.clientHeight

  • document.body.clientWidth

Practical JavaScript solution (covers all browsers, including IE8 and the following versions):

Example

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

Try It! 

This example shows 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