BOM Window (Browser Object Model)

The Browser Object Model (BOM) give access JavaScript to “talk to” the browser.


Browser Object Model (BOM)

There are no such official standards for the Browser Object Model (BOM).

As newly or modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity and connectivity, it is often referred to, as methods and properties of the BOM.


The Window Object

All browsers support window object. 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 is a property of the window object:

window.document.getElementById("header");

is the same as like:

document.getElementById("header");

Window Size

Two below properties can be used to find 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)

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

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

The below example displays the browser window’s height and width: (NOT including toolbars/scrollbars)

Input:-
<!DOCTYPE html>
<html>
<body>

<p id="result"></p>

<script>
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var p = document.getElementById("result");
p.innerHTML = "Your browser inner window width: " + width + ", height: " + height + ".";
</script>

</body>
</html>

Output :-


Other Window Methods

Some other useful methods:

  • window.open() – To open a new window
  • window.close() – To close the current window
  • window.moveTo() – To move the current window
  • window.resizeTo() – To resize the current window