WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript Window - The Browser Object Model


Browser Object Model (BOM) gives JavaScript the ability to "talk" to the browser.


The Browser Object Model (BOM)

Browser Object Model ( B rowser O bject M odel (BOM)) has no formal standards.

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


The Window Object

The window object is upheld by all programs. It speaks to the program's window.

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

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

Global variables are attributes of the window object.

Global functions are methods of the window object.

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

window.document.getElementById("header");

is the equivalent as:

document.getElementById("header");

Window Size

There are three ways to determine the size of your browser window.

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

  • window.innerHeight-the internal height of the browser window (including the scroll bar)
  • window.innerWidth-the internal width of the browser window (including the scroll bar)

For Internet Explorer 8, 7, 6, 5:

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

or

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

Practical JavaScript solution (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.


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