/

HTML / CSS / JavaScript Tutorial

The JavaScript BOM (Browser Object Model)

[this page | pdf | back links]

When a page is opened by a browser it is typically opened:

 

(1)   In a window

(2)   On a screen

(3)   From a specific URL

(4)   By a specific browser

(5)   Which may have opened this URL (and others from the same web domain) previously

 

Objects exposed by the browser within JavaScript can inform the JavaScript programmer about the characteristics of (1) – (5), which can help to provide a more responsive user experience. These objects are collectively known as the JavaScript BOM, i.e. Browser Object Model. There are no agreed standards for these objects, but majr browsers typically implement them:

 

The window object:

 

The window object represents the open window. If a page contains some <iframe> elements then separate window objects are created by the browser for each <iframe> as well as one for the main page. It typically supports the following properties and methods:

 

Properties:

 

Property

Description

More

closed

Returns true if the window has been closed, false otherwise

Here

defaultStatus

Sets / returns default text in window statusbar

Here

document

Returns the document object currently associated with the window

Here

frameElement

Returns the <iframe> object in which the current window resides

Here

frames

Returns an array-like object of all <iframe> objects in the current window object

Here

history

Returns the history object for the window

Here

innerHeight

Returns the height of the window’s content area

Here

innerWidth

Returns the width of the window’s content area

Here

length

Returns the number of <iframe> objects in the current window

Here

localStorage

Returns a reference to the local storage object used for the object

Here

location

Returns the location object for the window

Here

name

Sets / returns window name

Here

navigator

Returns navigator object for the window

Here

opener

Returns the window that created this window

Here

outerHeight

Returns the height of the window including toolbars, scrollbars etc.

Here

outerWidth

Returns the width of the window including toolbars, scrollbars etc.

Here

pageXOffset

Returns number of pixels current document has been scrolled horizontally (from upper left corner of window)

Here

pageYOffset

Returns number of pixels current document has been scrolled vertically (from upper left corner of window)

Here

parent

Returns parent window of the window

Here

screen

Returns screen object for window

Here

screenLeft

Returns horizontal coordinate of window relative to screen

Here

screenTop

Returns vertical coordinate of window relative to screen

Here

screenX

Returns horizontal coordinate of window relative to screen

Here

screenY

Returns vertical coordinate of window relative to screen

Here

sessionStorage

Stores data in a web browser (one session) in the form of key/value pairs

Here

scrollX

Alias for pageXOffset

Here

scrollY

Alias for pageYOffset

Here

self

Returns the current window

Here

status

Sets / returns text in window statusbar

Here

top

Returns topmost browser window

Here

 

Methods:

 

Method

Description

More

alert()

Displays an alert box

Here

atob()

Decodes a base-64 encoded string

Here

blur()

Removes focus from window

Here

btoa()

Encodes a string in base-64

Here

clearInterval()

Clears timer set with setInterval()

Here

clearTimeout()

Clears timer set with setTimeout()

Here

close()

Closes current window

Here

confirm()

Displays a dialog box (with an OK and Cancel button)

Here

focus()

Sets focus to window

Here

getComputedStyle()

Gets current computed CSS styles applied to element

Here

getSelection()

Returns Selection object representing range of text selected by user

Here

matchMedia()

Returns MediaQueryList object representing the results of applying a specified CSS media query string

Here

moveBy()

Moves window relative to current position

Here

moveTo()

Moves window to a specified position

Here

open()

Opens new browser window

Here

print()

Prints contents of window

Here

prompt()

Displays dialog box prompting user for input

Here

resizeBy()

Resizes window by specified numbers of pixels

Here

resizeTo()

Resizes windows to specified width and height

Here

scroll()

Depreciated (replaced by scrollTo() method)

Here

scrollBy()

Scrolls document by specified number of pixels

Here

scrollTo()

Scrolls document to specified coordinates

Here

setInterval()

Calls function or evaluates expression at specified intervals (in milliseconds)

Here

setTimeout()

Calls function or evaluates expression after a specified interval (in milliseconds)

Here

stop()

Stops window from loading

Here

 

The screen object:

 

The screen object provides information about the screen in which the browser window has opened. It typically supports the following properties and methods:

 

Properties:

 

Property

Description

More

availHeight

Returns screen height (excluding taskbar)

Here

availWidth

Returns screen width (excluding taskbar)

Here

colorDepth

Returns bit depth of colour palette

Here

height

Returns total height of screen

Here

pixelDepth

Returns colour resolution (bits per pixel) of screen

Here

width

Returns total width of screen

Here

 

The location object:

 

The location object provides information about the URL populating the current window. It typically supports the following properties and methods:

 

Properties:

 

Property

Description

More

hash

Anchor part of href attribute

Here

host

Hostname and port part of href attribute

Here

hostname

Hostname part of href attribute

Here

href

Sets / returns entire URL

Here

origin

Returns protocol, hostname and port part of href attribute

Here

pathname

Pathname part of href attribute

Here

port

Port part of href attribute

Here

protocol

Protocol part of href attribute

Here

search

Query-string part of href attribute

Here

status

Sets / Returns text in window statusbar

Here

top

Returns topmost browser window

Here

 

Methods:

 

Method

Description

More

assign()

Loads new document

Here

reload()

Reloads document

Here

replace()

Replaces current document with new one

Here

 

The navigator object:

 

The navigator object provides information about the browser that has opened the window. It typically supports the following properties and methods:

 

Properties:

 

Property

Description

More

appCodeName

Returns browser code name

Here

appName

Returns browser name

Here

appVersion

Returns browser version information

Here

cookieEnabled

Indicates whether cookies are enabled in browser

Here

geolocation

Returns Geolocation object (can be used to locate user’s position)

Here

language

Returns browser language

Here

online

Returns whether browser is online

Here

platform

Returns platform the browser is compiled for

Here

product

Returns browser engine name

Here

userAgent

Returns user agent header sent by browser to server

Here

 

Methods:

 

Method

Description

More

javaEnabled()

Indicates whether browser has Java enabled

Here

 

The history object:

 

The history object provides information on the URLs visited by the user within the browser. It typically supports the following properties and methods:

 

Properties:

 

Property

Description

More

length

Returns number of URLs in history list

Here

 

Methods:

 

Method

Description

More

back()

Loads previous URL in history list

Here

forward()

Loads next URL in history list

Here

go()

Loads URL in history list specified by index number

Here

 


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile