Working with the Browser Object Model (BOM)
One of the key purposes of JavaScript is to work with the BOM and the DOM. You use these objects to change your application inside the user’s browser. This includes manipulating look and feel, navigating to other pages, modifying content on the page, and more. Let’s start by looking at what you can do with the BOM.
The browser object model is a model of the current browser or tab in which your page is running. You access this model using the object window. This object gives you access to many of the features of the actual browser. For example, the JavaScript code window.print(); will launch the browser’s print dialog from your page. There are many such methods and properties of window—too many to list them all here. However, the following walks you through a few examples of using window in various scenarios.
Alert the User
You may have noticed that we’ve used the alert method a few times already in this chapter. This method allows you to display text to the screen. This can often be helpful when you’re debugging JavaScript. The alert method is off the window object. You send an alert dialog as follows.
window.alert('Hello World'),
Confirm User Action
You can use the confirm method to confirm whether a user wants to take a given action. This displays a dialog with an OK and Cancel button. The results are returned as true if the user presses OK. The following shows an example.
var isConfirmed = window.confirm('Are you sure?'),
if (isConfirmed) {
//Do something on true.
}
Open (and Close) a New Window
The window.open method allows you to create a new browser window. When you do so, you can load a page in the window. You can also set properties of the window itself, such as height and width. The following shows opening a new window and loading an About page.
var newWin = window.open("home/about", "newWin",
"width=400, height=500", false);
newWin.focus();
You can then close the window using the window.close method. For example, you might add an anchor tag to the About page (as loaded in the prior example). This anchor tag can get set to call the window.close method, as in the following.
<a href="javascript:this.window.close();">Close</a>
Open a Window Relative to Another Window
The window object provides information on positioning. This includes determining the active windows left and top coordinates relative to the current screen. The following code shows an example of using this information to open a new window slightly offset inside the parent window.
var winWidth = 400;
var winHeight = 500;
var left = (window.screenLeft + 50);
var top = (window.screenTop + 50);
window.open('home/about', 'newWin', 'resizable=no,' +
'width=' + winWidth + ', height=' + winHeight +
', top=' + top + ', left=' + left, false);
These are just a few of the things you can do using the window object. The window object also provides access to a number of child objects. These objects offer even more core features for manipulating the browser. For example, the screen object allows you to get the height and width of the screen, excluding the user’s task bar (as availHeight and availWidth). Figure 18.2 shows the child objects of window and a brief description of each.
Let’s look at a few more examples. Each of the following uses the window object along with its child objects shown in Figure 18.2.
Navigate with history
This history object allows you to work with URLs navigated by the user in the current browser, current session. This includes the back and forward methods for going to the previous URL and the next one in history. It also includes the go method for moving to a specific item in history.
The following example creates a back and forward link on your page. This is the equivalent of using the browser’s Back and Forward buttons. If there is no page to go back or forward to, nothing happens.
<a href="javascript:this.window.history.back();">< Back</a>
<a href="javascript:this.window.history.forward();">Forward ></a>
Control the URL with location
The window.location object allows you to get information for the current URL as well as navigate to new URLs. You can use the href property to return the full URL, for example. You can also use it to send the user to a new URL. The following shows using the reload method to refresh a page when a user hits a link. (Of course, you could do the same for a button.)
<a href="javascript:window.location.reload();">Refresh</a>
Use the screen Object
The screen object gives you details about height (height and availHeight), width (width and availWidth), color resolution (pixelDepth), and color palette depth (colorDepth). You can use these properties to size make decisions about colors and window sizes. For example, the following shows using the colorDepth property to load a logo optimized for a user’s screen.
if (screen.colorDepth <= 8) {
//Load a logo optimized for 8-bit screens.
}
else {
//Load a logo optimized for modern screens.
}
Check Browser Details with navigator
The navigator object gives you details about the current browser running your page. This includes whether the user has cookies enabled (cookieEnabled), the name of the browser (appName), the version of the browser (appVersion), the computer platform running the browser (platform), and more.
A common use of navigator is browser detection. All browsers are different; they all support the HTML, CSS, JavaScript standards in different ways. Sometimes you will have to program your JavaScript and HTML around the version of a given browser. You may also expect cookies to be enabled to run your application. With navigator, you can check in advance and notify the user if there are unmet constraints for using your application.
The previous BOM examples illustrate using the child objects of window. That is, with one notable exception: document. The document object gives you access to the actual document object model of the page. This is a much bigger (and widely used) object. Let’s look at it next.