The Browser Object Model (BOM)

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

The Window Object

The window object is supported by all browsers. It represents the browser's 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 document object (of the HTML DOM) is a property of the window object:

window.document.getElementById("header");"

is the same as:

document.getElementById("header");

Window Size

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

Both properties return the sizes in pixels:

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

The browser window (the browser viewport) is NOT including toolbars and scrollbars.

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

Window Screen

The window.screen object contains information about the user's screen.

Properties:

• screen.width
• screen.height
• screen.availWidth
• screen.availHeight
• screen.colorDepth
• screen.pixelDepth

Window Location

The window.location object can be written without the window prefix.

Some examples:

• window.location.href returns the href (URL) of the current page
• window.location.hostname returns the domain name of the web host
• window.location.pathname returns the path and filename of the current page
• window.location.protocol returns the web protocol used (http: or https:)
• window.location.assign() loads a new document

Window History

The window.history object contains the browsers history.

Some methods:

• history.back() - The history.back() method loads the previous URL in the history list and same as clicking back in the browser
• history.forward() - The history.forward() method loads the next URL in the history list and same as clicking forward in the browser