JavaScript Browser Object Model

Although ECMA-Script defines it as the core of JavaScript, the Browser Object Model (BOM) is the central part of using JavaScript on the Web. This chapter will teach you about the browser object model, window-related objects and frames, positions, and more.

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 uses 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 variable 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 frame collection, the window objects get indexed by number (ranging from 0 and going in the direction of left to right and then row by row) and by the frame's name. Each window object has its name property that contains the frame's name. 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 straightforward in JavaScript. Internet Explorer 9+, Mozilla Firefox, Safari Browser, Opera, and Google Chrome - these 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;
    }
}
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram