Browser Object Model
\title{ Browser Object Model }
{Learning Objectives}
This lesson provides information on the Browser Object Model (BOM). By the end of this lesson, learners will be able to:
Describe the Browser Object Model.
Describe the Browser Object Model Hierarchy.
Use Window object properties and methods to analyze and control the window.
Use the Location object to analyze the current URL.
Use the Screen object to analyze the user's screen.
Use the History object to navigate between pages in the browsing history.
Use the Navigator object to gain information about the user's browser.
{Table of Contents}
{The Browser Object Model}
The Browser Object Model (BOM) is a graph of objects used to interact with the browser. The BOM provides access to the characteristics of a browser (i.e. browser window, screen characteristics, browser history etc.).
The window object, as the default, provides access to the methods in the BOM directly or indirectly. Even the document object model (DOM) is a property of the window object. It is important to note that there are no official standards for the BOM, but almost all modern browsers have implemented the same methods for interactivity. The window object is supported by all browsers.
All global JavaScript objects, functions, and variables automatically become members of the window object. Global variables are properties of the window object, and global functions are methods of the window object.
Example: window.document.getElementById("header") is the same as document.getElementById("header"); If a document contains frames ( tags), the browser creates one window object for the HTML document, and one additional window object for each frame.
{The Browser Object Model Hierarchy}
{Browser Object Model Objects}
In order to program BOM objects, they must be identified to the scripts that manipulate their properties and methods. The table on this page summarizes several of the references used within scripts to identify common BOM objects.
Script references to BOM objects use standard dot notation to trace through the BOM hierarchy and identify specific objects. In some cases, there are shortcut notations that do not require the complete hierarchical path to an object. For example, window. document can be shortened to document.
{Window Object Properties}
\begin{tabular}{|ll|} \hline Property & Description \ \hline closed & Returns true if window is closed. \ \hline defaultstatus & Set the text on the status bar. \ \hline innerHeight & The inner height of the page (not including toolbar, other tabs, etc). \ \hline innerwidth & The inner width (excludes toolbar, other tabs, etc.). \ \hline outerHeight & The outer height of a window (including toolbar, other tabs, etc). \ \hline outerwidth & The outer width of a window. \ \hline location & The window's current URL. \ \hline name & Name of the window. \ \hline parent & Reference to the window that the current window came from. \ \hline pageXoffset & The number of pixels user has scrolled horizontally from the upper-left corner of document. \ \hline pageYoffset & The number of pixels the user has been scrolled vertically. \ \hline screenx & Vorizontal coordinate of the window relative to the screen. \ \hline screeny & The top-most parent window. \ \hline top & \ \hline \end{tabular}
{Getting Information About the Window}
The basic function of the window object is to get information about the browser window.
Run the window-information.html file. Resize the browser, and then reload it; notice how the numbers change for each property.
The read-only window property innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present.
The window. outerWidth read-only property returns the width of the outside of the browser window. It represents the width of the whole browser window, including the sidebar (if expanded), window header, and window-resizing borders/handles.
{Window Object Methods}
The window object has many methods, which allow you to manipulate the window. There are too many window methods to cover in the scope of this presentation; however, some commonly used methods are listed in the following table:
\begin{tabular}{|ll|} \hline Method & Description \ \hline window.alert() & Opens an alert message box and displays a text string. \ \hline window.prompt() & Opens a prompt message box and returns entered value. \ \hline window. confirm( ) & Opens a confirm message box and returns true or false. \ \hline window.open() & Opens a secondary window. \ \hline window. focus() & $\begin{array}{l}\text { Brings focus to a window. When working with secondary windows, brings the window to the } \ \text { foreground. }\end{array}$ \ \hline window.blur() & $\begin{array}{l}\text { Removes focus from a window. When working with secondary windows, moves the window to } \ \text { the background. }\end{array}$ \ \hline window.close() & Closes an open window. \ \hline window.print() & Presents the print dialog box to print the window contents. \ \hline window.scroll() & Scrolls the document to the specified coordinates. \ \hline window.stop() & Stops the document from loading. \ \hline \end{tabular}
{Window Object Methods: Open and Close}
Open this file to see the example in action.
The open() method opens a new browser or secondary window (tab). This method includes numerous parameter values that control the look and functionality of the newly opened window.
A secondary window overlays the main browser window. It is used for opening a different Web page or creating a new Web page under script control.
The close() method closes the current window, or the window on which it was called.
This method can only be called on windows that were opened by a script using the Window.open() method.
{Window Object Methods: Scroll and Print}
The window. scroll() method scrolls the window to a particular place in the document, and accepts $x$ and y coordinates as arguments.
Be careful when using the scroll method, as any method that takes control of the browser window away from the user (even for a moment) can be disorienting and provide poor user experience.
window.print() opens the print dialog to print the current document.
{The Location Object}
The location object stores many properties that hold data related to the current URL.
\begin{tabular}{|lll|} \hline Property & Description & Example \ \hline hash & The URL hash, the anchor part. & "#myData" \ \hline host & The server name and port number. & www.perscholas.org:8080 \ \hline hostname & Server name without the port number & www.perscholas.org \ \hline href & The full URL of the page currently loaded. & https://perscholas.org/ \ \hline pathname & The directory and filename of the URL. & "/JavaScript/" \ \hline port & The port number. & "8080" \ protocol & The protocol currently in use. & "https:" \ search & The query string of the URL, beginning with a question mark. & "?q=courses" \ \hline \end{tabular}
window. location. hostname
{The Screen Object}
Although most information about the user's system is hidden for security reasons, it is possible to get a certain amount of information about the user's monitor using the screen object. It provides information such as width, height, color-depth, display, number of pixels available, etc. These properties can be used with the window object's methods to set the size and position of the browser window.
screen.availHeight - Returns the height of the screen, in pixels, minus permanent or semi-permanent user interface features displayed by the operating system such as the taskbar.
screen.availWidth - Returns the amount of horizontal space in pixels available to the window. screen.colorDepth - Returns the color depth of the screen.
screen.height - Returns the height of the screen in pixels.
screen.width - Returns the width of the screen.
Use the provided screen-object.html example file to see some of these properties in action.
{The History Object}
The window. history object contains the browser's history. You can load previous history or forward to a particular page. For security reasons, scripts cannot access the URLs in this data; instead, the history object provides methods to navigate between them.
Name
$\operatorname{back}()$
forward( $)$
length go $(\langle$ index $\rangle)$
Description
To go one step back in the history.
To go one step forward in the history.
To go the specified position in the history relative to the current document.
To return the number of items in the browser history.
pushState(〈state>, 〈title〉, ) To Push (add) an entry in a stack to the browser history.
{Navigating within Browsing History}
Use the provided history-object.html file to follow along with this example.
Open your browser and go to different websites to create a browsing history if you do not already have one.
Next, open the provided file in your current browser tab.
Click on the different buttons to go forward and backward in your browsing history.
{The Navigator Object}
The window. navigator object contains information about the visitor's browser.
\begin{tabular}{|l|l|} \hline Property & Description \ \hline appCodeName & Returns the code name of the browser. \ \hline appName & Returns the name of the browser. \ \hline appVersion & Returns the specifics of the version of the browser. \ \hline mimeTypes & $\begin{array}{l}\text { Returns the array of MIME types (only in some } \ \text { browsers). }\end{array}$ \ \hline userAgent & $\begin{array}{l}\text { The operating system on which the browser runs; } \ \text { returns the platform (e.g. Win32). }\end{array}$ \ \hline plugins & $\begin{array}{l}\text { The HTTP user-agent header sent from the } \ \text { browser to the server. }\end{array}$ \ \hline Returns the plugins (only in some browsers). \end{tabular}
{Knowledge Check}
What is the object at the top of the Browser Object Model Hierarchy?
What are two of the other objects in the Browser Model Hierarchy?
Which property returns the interior width of the window in pixels?
Which window method opens an alert message box and displays a text string?
Which window method opens a text box that allows for user input?
Which window method opens a new browser or secondary window?
Which object gives you information about the current URL?
Which object gives you information about the available dimensions for a window?
Which object allows you to go to a previous web page?
Which object contains information about the user's browser?
{Summary}
In this lesson, we explored the Browser Object Model (BOM). The BOM provides access to the characteristics of a browser (e.g., browser window, screen characteristics, browser history, etc.) and the window object, which is supported by all browsers and provides access to the BOM. All global JavaScript objects, functions, and variables are members of the window object.
The window object also has properties that describe the browser, such as innerwidth and innerHeight, which describe the dimensions of the window. Direct methods of the window object can allow you to do things such as alert the user to something via a message box, prompt the user for input, open and close windows, and more.
Within the BOM hierarchy, the window object has direct child objects called location, history, screen, navigator, and document. Each of these objects provides properties and methods for different parts of the browser.
The location object provides information about the current URL.
The history object stores browsing history and can be used to navigate between pages.
The screen object has properties related to the user's screen.
The navigator object contains information about the user's browser.
The document object contains the Document Object Model (DOM).
{Questions?}
Last updated
