A Beginner JavaScript Tutorial Series: The Browser Object Model

Outline of this Tutorial

In this tutorial we look at the Browser Object Model. Since there is no uniform standard for the BOM it must be used with caution. However, many of the web browsers which have been developed access information through the same named methods. Also, details on accessing information is available through specific browser implementation documentation. For example, Microsoft, in its Microsoft Developer Network provides extensive information about its implementation. Many of the methods described in this tutorial are common to all browsers, again how useful browser information is is dependent upon how current it is. Hopefully, through this tutorial you will discover some information which is useful in your endeavors. Finally, I have used the information contained here to verify (at least currently) that it is correct.


Our First Example Shows the Disparity Among the BOMs

As mentioned in the previous section there is no standard for the BOM and our first and simplest example, determining the size of a window illustrates this.

The window object is supported by all browsers. That makes complete sense, otherwise what would you have to work with? In respect to JavaScript, all global objects methods, and properties are associated with the window.The HTML DOM document object is also a property of the BOM.

The method for the object window when locating an element with a property is equivalent to the object document, locating an element with a specific property:

window.getElementById() is equivalent to document.getElementById().

Some of the methods (which you would expect) are present in the BOM. For example, opening, closing, resizing, relocating the window, and just obtaining current size are methods available.

The problem is quite often not semantics when dealing with the various browsers, but the syntax.

For example, just in determining the size of the current window Internet Explorer (Henceforth, referred to through this tutorial has had 3 definitions for window height and width:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth
  • document.body.clientHeight
  • document.body.clientWidth

and,

  • window.innerHeight
  • window.innerWidth

just to describe the inner height and with of the browser window. What makes it even more difficult is that newer browser versions of IE don't support the older access methods. The following example illustrates this with IE 11 and trying to use clientHeight and clientWidth which was supported in earlier versions.

The code workaround in the first snapshot appears to work correctly.

A Deprecation Issue? Yes, It Appears So.

A solution would be present the browsers with the known variations in how the properties were accessed in the various versions of the code This snapshot illustrates that that is a feasible solution. The output is from Chrome, IE, Opera, Firefox.
A solution would be present the browsers with the known variations in how the properties were accessed in the various versions of the code This snapshot illustrates that that is a feasible solution. The output is from Chrome, IE, Opera, Firefox.
This example demonstrates that IE code from earlier version must have been depricated (or at least not verified for  support in IE 11.
This example demonstrates that IE code from earlier version must have been depricated (or at least not verified for support in IE 11.

The windows.screen() Properties

There are two properties associated with the screen object:

  • screen.availWidth, and
  • screen,availHeight

The fol

<!DOCTYPE html>
<html>
<body>

<script>

document.write("Available Width: " + screen.availWidth);

document.write("Available Width: " + screen.availHeight);

</script>

</body>
</htm

lowing code ran successfully on Firefox, Chrome, Canary, IE 11, and Opera.


Window Location Properties

Several of the information properties which;

  • location.hostname returns the domain name of the web host
  • location.pathname returns the named path of the current page
  • location.port returns the port of the web host
  • location.protocol returns the web protocol used (e.g. http or Https)

In addition you can assign a value to go to as the following snapshot indicates.

Using "window.location.assign" in JavaScript

In this example, the location.assignment was made to the root of the yahoo web site.
In this example, the location.assignment was made to the root of the yahoo web site.

Window History

The window.history object serves the same function as the back and forward buttons. The form of the statements is:

  • window,history.back() - same as clicking back in the browser
  • window.history.forward() - same as clicking forward in the browser

Navigator Information May Be Wrong or Misleading!

The information is sometime suspect and sometime in error so if using any of the following proceed with caution.

For example. navigator.appCodeName returns Mozilla for all browsers.

Browser Name: is coded as navigator.appName The snapshot illustrates the problem with obtaining this property as well. For IE 11, Chrome Canary, and Foxfire. The value returned is all cases is netscape.

Browser Version: is coded as navigator.appVersion, The second snapshot illustrates the output for Chrome Canary. This does not appear too be useful either.

Cookies Enabled: is coded as navigator.cookieEnabled Incorrect results were reported for IE. Although, in my tests the the other browsers: Chrome, Firefox, Operal, Canary reported correct results.

There are several other properties documented:


Platform: is coded as navigator.platform For navigator.platform the Mozilla Foundation web site has the following statement: "Unless your code is privileged (chrome or at least has the UniversalBrowserRead privilege), it may get the value of the general.platform.override preference instead of the true platform.


User-agent header: is coded as navigator.userAgent.


User-agent language: is coded as navigator.systemLanguage.

My recommendation is to code a small JavaScript accessing all of the properties and verify if the results are correct and useful for your own purposes.

Results from navigator Properties

The results here are not very helpful. ID, Chrome, and Firefox report the same value for the property.
The results here are not very helpful. ID, Chrome, and Firefox report the same value for the property.
This is the result I obtained from Chrome Canary for the appVersion property. I did not find this very useful.
This is the result I obtained from Chrome Canary for the appVersion property. I did not find this very useful.

JavaScript Popup Boxes

The popup boxes are naturally associated with the window object. There are three forms of popup boxes supported:

  • window.alert which is used for cases where the user must be informed of an error or some action they might have to be take. It cannot be ignored as it requires the user to clickon an OK button before any other interaction takes place on the screen.
  • window.confirm is illustrated in the snapshot which follows. It provides two button alternatives: "OK" or "CANCEL". The developer can provide code to follow either action.
  • window.prompt is used when its desirable for the user to enter a value before interacting with the screen. The user will have to click either "OK" or "CANCEL" to proceed.. If the user clicks "OK" the input value is returned to the script. If the user press the "CANCEL" button. the vaulue returned is null.


The Confirm Box

This is an example of the use of the confirm box.  In the code presented, the developer chose to print a message indicating to the user which button was pressed.
This is an example of the use of the confirm box. In the code presented, the developer chose to print a message indicating to the user which button was pressed.

Wrap Up and What's Next

In the last two tutorials we have presented tow object models, the HTML DOM and the BOM. There are similarities in their coding, but one must remember one major difference. The HTML DOM is a W3C standard, so one can expect it to perform identically across all browsers. The BOM is not a formalized standard and as we have seen with the navigator object, it has some limitations and errors.

Our next tutorials return to a focus on the elements involved in coding JavaScript functions.

Please Rate This Tutorial

Cast your vote for Will this tutorial help you in your development ?

What Browser Do You Use?

Which browser is your favorite?

See results without voting

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working