Filed In:
Browser Object Model
The Browser Object Model (BOM) is the part of JavaScript that allows the code to interact with the web browser. It is the one part of JavaScript for which no formal standards exist. In this collection of resources, we'll look first at those objects that all browsers define, starting with the most useful. Then we move on to how to handle the situations where different browsers provide different ways to access the same information.
Browser Object Model and the Lack of Standards
There is no standard for the Browser Object Model. While some aspects of the BOM are implemented consistently across browsers, many of the most useful ones are not. Here, we explain the implications.
Introduction to the Browser Object Model
Just what is the Browser Object Model (BOM)? The article covers the very basics and helps you understand how BOM fits in with the rest of JavaScript.
Understanding the Window Object
The Window object is the most useful, common part of the Browser Object Model. In fact, you can't use JavaScript in a web browser without it.
Timeouts and Intervals
The Browser Object Model can be used to build delays into your JavaScript processing, in order to produce animated effects. This article will help you understand Timeouts and Intervals, the commands that let you do that.
Window.document
Not all of the properties and methods attached to the document belong to the Document Object Model. Some of them are part of the Browser Object Model, and some of those may occasionally be of use.
Location
Window.location, one of the most useful JavaScript commands, lets you redirect a current page's URL to another URL -- and much more.
History
The history object provides the ability to move to different pages in the browser history. However, its use is limited, because you can't see what is actually in the history -- just how many pages are in the history.
Manipulating Windows
Now that we have tabbed browsers, the ability to open, move, and resize windows from JavaScript is less useful than it used to be, because our visitors can always override our suggestions and open our new page in a new tab instead.
The Screen
The size of your visitor's screen is not a very useful piece of information. Fortunately browsers provide a way to find out what space is left after taking fixed toolbars into account. The information is still only useful for when your visitor allows you to open a new window, though.
Navigator
The navigator object is the least useful of the Browser Object Model available on all browsers. Different browsers implement different properties on this object to hold the same information. This means it's necessary to test multiple properties to see which is supported.
Viewport Size
Moving on from common but not very useful BOM objects and the most useful BOM data that needs to be accessed in different ways depending on the browser is the available width and height in the viewport. All of your animations will need this information, in order to know how far they can move while remaining visible.
Mouse Position
Most browsers provide a way to retrieve the coordinates of where the mouse cursor is pointing within the page -- they just don't provide the same way of accessing it. We can set up simple functions to provide common calls that we can use that work cross browser.
Scroll Position
The distance that the current page has been scrolled in the browser viewport is yet another pair of values where we require functions to provide us with cross browser support. Most do support a common call to actually scroll the page to a specified location.