JavaScript Window-Browser object model

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

Browser object Model (BOM)

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

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

Window Object

Window objects are supported by all browsers. It represents a browser window.

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

A global variable is a property of a Window object.

A global function is a method of a Window object.

Even the document of the HTML DOM is one of the properties of the Window object:

Window.document.getElementById ("header");

The same as this:

document.getElementById ("header");

Window size

There are three ways to determine the size of the browser window (the viewport of the browser, excluding toolbars and scroll bars).

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

• Window.innerheight-Interior height of the browser window
• Window.innerwidth-Interior width of the browser window

For Internet Explorer 8, 7, 6, 5:

• Document.documentElement.clientHeight
• Document.documentElement.clientWidth

Or

• Document.body.clientHeight
• Document.body.clientWidth

Practical JavaScript scenarios (all browsers included):

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: (not including toolbars/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 ()-Adjusts the size of the current window

JavaScript Window-Browser object model