JavaScript shines with a codified BOM

The Browser Object Model (or BOM) is an API you use it to access and manipulate the browser window. With the BOM, you can interact outside the boundaries of the displayed page, which is an awesome capability. But the BOM is also an evil dragon, because it doesn’t has any standard, and thus each browser has a different BOM API.

So, no standard eh? Well, for a long time, that was completely true. But HTML5 sought to standardize the BOM and created a specification for it. So now, the major browser have some agreed upon names and methods for the most used functionalities.

What does the BOM do?

Anything that’s browser specific is part of the BOM, but generally you will use it for manipulating windows and frames.

  • ‘Window’: properties and methods related to windows and frames
    • pop-up windows
    • move, resize and close windows
    • alert(“Hello world!”);  //I’m sure you’re familiar with this statement 🙂
  • ‘navigator’: this object provides detailed information about the browser
    • used for user-agent sniffing
    • ‘geolocation’: this is usefull for directed commercials and such.
    • ‘cookieEnabled’: usefull to know.
  • ‘location’: usefull methods to retrieve the URL or parts of the URL of the loaded page
  • ‘screen’: Returns the width and height of the screen.
  • ‘history’: Returns the browser history and allows you to go back or forward to a specific page.
    • privacy related, you cannot read the specific entries of the history object, you only know how many entries their are.
    • It’s mostly used to create custom back and forward buttons

All the major browsers implement the above since HTML5 codified it, and it’s expected that the standard will expand and grow in the future, thus ending the confusion surrounding the BOM.

Then what’s not the same?

Anything that’s browser specific. IE has it’s ‘ActiveXObject’ and mobile browsers will have mobile specific methods.   Fortunately, a lot is the same (since HTML5) and you can do a lot with the standard functionalities already.

If you’re not sure you can use something, then go and check ‘Can I use?‘.

What’s the Difference between BOM and DOM

The Document Object Model (DOM) handles everything related to your page, while the Browser Object Model handles everything outside of the page.


Leave a Reply

Your email address will not be published. Required fields are marked *