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)