Browser Object Model (BOM)

I touched on the Browser Object Model (BOM) in my introduction section, now we look at it in a little more depth. The BOM consists of the objects navigator, history, screen, location and document which are children of the window object (see diagram below), the window object acts as a interface between Javascript and the browser. All Global variables and functions declared with var becomes properties and methods of the window object, this is not the case with let and const variables.

Using the diagram below the the window objects are below

top - is the browser window itself, the outer most window
parent - points to the current window, for the top most window parent equals top
self - always points to window

The window can be moved to new positions on the screen using various methods like moveTo() or moveBy, the screen is made up of CSS pixels, tis is used by all browsers so its unform across all devices.

There are various commands that you can use to navigate and open windows, I will list the most commonly used ones

Window resize	// resize to 100 x 100 window.resizeTo(100, 100); // resize to 200 x 150 window.resizeBy(100, 50);
Viewport position	// Scroll right 40px relative to the current viewport Window.scroll(40, 0); // Scroll to the top left corner of the page window.scrollTo(0, 0); // Scroll to 100px from the top and left of the page window.scrollTo(100, 100);
Open a window	// same as <a href="http://www.datadisk.co.uk" target="topFrame"/> window.open("http://www.datadisk.co.uk.com/", "topFrame");
Checking pop-ups	let blocked = window.open("http://www.datadisk.co.uk.com", "_blank"); if (blocked == null){ alert("The popup was blocked!"); }
Intervals and Timeouts	// schedules an alert to show after 1 second setTimeout(() => alert("Hello world!"), 1000); // set the timeout let timeoutId = setTimeout(() => alert("Hello world!"), 1000); clearTimeout(timeoutId); // cancel it
system dialogs	// confirmation diag box, true or false will be returned confirm("do you want to confirm this diaglog box?") // alert dialog alert("This is an alert diaglog box");

Location Object

The location object provides information about he document that is currently loaded, as well have some navigational functionality. Both window.location and document.location point to the same object, below are some useful properties that can be used, there are many more

location.host	name of the server and port number
location.hostname	the name of the server without the port number
location.href	the full URL of loaded page
location.pathname	directory and/or filename of URL
location.protocol	the protocol used to retriee the web page http, https, etc
location.search	the query string of the URL
location.username and location.password	the username and password specified before the domain name.
location.assign	navigate to new URL specified

Navigator Object

The navigatior object is used fore browser detection, it can be used to obtain information about the browser, there are a number of properties that you can use i have lised the most commnely used one but there are many more

appName	full browser name
appVersion	browser version
cookieEnabled	indicates if cokkies are enabled
deviceMemory	amount of device memory in GB's
geolocation	the geolocation object
language and languages	the browsers language or languages
platform	the platform the browser is running on
plugins	returns array of plugins installed in the browser

Screen Object

Used to provide screen information only, it can be used to obtain the users screen capabilities such as height and width, there are a number of properties and I have listed the most commnly used ones but there are many more

height	pixel height of the screen avilable
width	pixel width of the screen avilable
colorDepth	number of bits used to represent colors (32 bits for most systems)
orientation	the screen orientation

History Object

The history object provides history information since the browser was first used, each window will have its own history object, however some browsers will protect some data like previous URL's, etc. There are a number of properties and I have listed the most commnly used ones but there are many more

go back open page	history.go(-1)
go forward open page	history.go(1)
go to nearest specified URL	history.go("www.datadisk.co.uk")

Capability Detection

Capability detection is a suite of checks to see what features a browser can support, yo should code to test for the most up to date features first as most users now use up to browsers.

Check for up to date features first

function getElement(id) {
    if (document.getElementById) {
        return document.getElementById(id);                    // was introduced in IE5
    } else if (document.all) {
        return document.all[id];                               // older than IE5
    } else {
        throw new Error("No way to retrieve element!");
    }
}

You can use the Browser Object Model (BOM) objects to detect aspects of a browser like if they have a plugin installed

Use BOM to determine capabilities

// determine if the browser has Netscape-style plugins
let hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);

// determine if the browser has basic DOM Level 1 capabilities
let hasDOM1 = !!(document.getElementById && document.createElement &&document.getElementsByTagName);

Browser detection

class BrowserDetector {
constructor() {
    // Test for conditional compilation Supported IE6 to IE10
    this.isIE_Gte6Lte10 = /*@cc_on!@*/false;

    // Test for presence of documentMode Supported IE7 to IE11
    this.isIE_Gte7Lte11 = !!document.documentMode;

    // Test for presence of StyleMedia constructor Supported Edge >= 20
    this.isEdge_Gte20 = !!window.StyleMedia;

    ...., etc
}

isIE() { return this.isIE_Gte6Lte10 || this.isIE_Gte7Lte11; }
isEdge() { return this.isEdge_Gte20 && !this.isIE(); }
isFirefox() { return this.isFirefox_Gte1; }
isChrome() { return this.isChrome_Gte1 };
..., etc
}

User Agent detection

You can use the browsers user-agent string to retrieve information about a browser, this string is sent for every HTTP request and can be accessed by the navigator.userAgent property,

User-Agent string

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

Note: you can use the above string to determine what browser, version and features it is capable of.

Software and Hardware Detection

Again the navigator object can obtain information about the cpu, vendor, platform, etc.

Using navigator object to get information

navigator.oscpu
navigator.vendor
navigator.platform
navigator.platform
navigator.orientation