BOM (browser object model) provides many objects for accessing browser functions, which are independent of any web page content.

window object

global scope

There is a difference between defining global variables and directly defining attributes on the window object: global variables cannot be deleted through the delete operator, but attributes defined directly on the window object can.

var age = 29;
window.color = "red";

delete window.age;
delete window.color;

console.log(window.age); //29
console.log(window.color); // undefined

Window relationship and framework

window.top: Specifies the framework of the highest (outermost) layer
window.parent: refers to the direct upper frame of the current frame. In some cases, the parent may be equal to top

window position

Use the following code to get the left and top positions of the window across browsers:

var leftPos = (typeof window.screenLeft =="number" )? window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop =="number") ? window.screenTop:window.screenY;

console.log(leftPos);
console.log(topPos);

Window size

Although you cannot determine the size of the browser window itself, you can get the size of the page viewport.

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;
    }

}

console.log(pageWidth);
console.log(pageHeight);

location object

// take url Modified to"http://www.wrox.com/WileyCAD/#section1"
location.hash = "#section1";

// take url Modified to"http://www.wrox.com/WileyCAD/?q=javascript"
location.search = "?q=javascript";

// take url Modified to"http://www.yahoo.com/WileyCAD/"
location.hostname = "www.yahoo.com";

// take url Modified to"http://www.yahoo.com/mydir/"
location.pathname= "mydir";

// take url Modified to"http://www.yahoo.com:8090/mydir/"
location.port= 8090;
location.reload(); // Reload (possible from cache)
location.reload(true); // Reload (reload from server)

navigator object

Check plug-ins

// Test plug-in (in IE Invalid)
function hasPlugin(name){
    name = name.toLowerCase();
    for (var i=0; i<navigator.plugins.length;i++){
        if (navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
            return true;
        }
    }

    return false;
}

// Testing flash
console.log(hasPlugin("Flash"));

// Testing IE Plug in
    function hasIEPlugin(name){
        try{
            new ActiveXObject(name);
            return true;
        }catch(ex){
            return false;
        }
    }
    
    // Testing flash
    alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));

screen object

There are several objects in javascript that are not very useful in programming, and the screen object is one of them. The screen object is basically only used to indicate the capabilities of the client.

history object

history.go(-1); // Back a page
history.go(1); // Advance page
history.go(2); // Forward two pages

history.back(); // Step back
history.forward(); //One step forward

//Determine if the user has opened your page in the first place
if(history.length == 0) {
    // This should be the first page after the user opens the window
}