JavaScript Browser Object Model

Though ECMA-Script defines it as the core of JavaScript, the Browser Object Model (BOM) is the central part of using JavaScript on the Web. In this chapter, you will learn about the browser object model along with window related objects and frames, positioning, etc.

About Window Object

At the heart of the BOM is the window object that signifies an instance of the browser. The window object serves a dual purpose in browsers and acts as the JavaScript interface between the browser window and the ECMA-Script Global object. This ultimately means that every object, variable, and function defined in a web page make use of the window as its Global object and has the right of entry to the methods like parse-Int().

What is Global Scope?

Since the window object gets doubles as the ECMA-Script Global object, every other variables and function declared globally turned into properties and methods of the window object. Let us take the example given below:

var age = 26;
function say_Age(){
   alert(this.age);
}

alert (window.age);    //26
say_Age();       //26
window . say_Age();    //26

In the above example, a variable named 'age' and a function named 'say_Age()' is classified in the global scope that automatically places them on the window object. So, the variable age is also accessible as window .age, and the function say_Age() is also accessible via window.sayAge().

Window Relationships and Frames

When a page contains frames, each frame has its window object which is stored in the frames collection. Within that frames collection, the window objects get indexed both by number (ranging from 0 and going in the direction of left to right and then row by row) and by the name of the frame. Each window object has its name property that contains the name of the frame. Let us the following code snippet -

<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="150,*">
 <frame src="frame1.html" name="top_Frame">
 <frameset cols="60%,60%">
 <frame src="another_frame.html" name="left_Frame">
 <frame src="yetAnother_frame.html" name="right_Frame">
 </frameset>
</frameset>
<noframes></noframes>
</html>

The above code snippet generates a frameset having one frame across the top and two frames below. Also, the top frame can be referenced by window.frames[0] or window.frames ["top_Frame"]. Though, you would most likely use the top object instead of a window to refer to these frames (creating its top .frames[0], for instance). The top object always points to the very top (outermost) frame, which is the browser window itself.

Alter Window Size using JavaScript

Shaping the size of a window cross-browser is not straight-forward in JavaScript. Internet Explorer 9+, Mozilla Firefox, Safari Browser, Opera, and Google Chrome - all these mentioned browsers supply four properties to deal with window size: innerWidth, innerHeight, outerWidth, and outerHeight.

var pageWidth = window.innerWidth, pageHeight = window. innerHeight;

if (typeof pageWidth != "number"){
 if (document. compatMode == "CSS1Compat"){
   pageWidth = document. documentElement . clientWidth;
   pageHeight = document. documentElement . clientHeight;
 } else {
   pageWidth = document . body . clientWidth;
   pageHeight = document . body . clientHeight;
 }
}