JavaScript BOM window object
Browser Object Model (BOM), the window
object is a key component that represents the browser's window or tab. It provides a way to interact with the browser environment, including the web page, browser history, and more.
Detailed Explanation of the window
Object in BOM
1. Global Object
- Global Scope: In JavaScript running in the browser,
window
is the global object. This means that any variables or functions defined in the global scope are properties of thewindow
object.
2. Window Properties
window.document
: Thedocument
object represents the web page and is used to manipulate the page's content. It’s an essential part of the DOM (Document Object Model).window.location
: Provides information about the current URL and allows navigation to other URLs. It has properties such ashref
(full URL),pathname
(path part of the URL),search
(query string), andhash
(fragment identifier).window.history
: Provides access to the session history of the browser. You can navigate through the history with methods likeback()
,forward()
, andgo()
.window.navigator
: Contains information about the browser itself, such asuserAgent
(browser string),platform
(operating system), andgeolocation
(geographical location).window.screen
: Provides information about the screen's size and color depth, such asscreen.width
andscreen.height
.window.localStorage
: Provides access to the local storage of the browser for storing data persistently across sessions.window.sessionStorage
: Similar tolocalStorage
, but the data is only available for the duration of the page session.
3. Window Methods
window.alert(message)
: Displays a dialog box with an alert message and an OK button.window.confirm(message)
: Displays a dialog box with a message and OK/Cancel buttons, returningtrue
if OK is pressed andfalse
if Cancel is pressed.window.prompt(message, defaultValue)
: Displays a dialog box with a message and an input field, allowing the user to enter a value.window.open(url, name, specs)
: Opens a new browser window or tab with the specified URL. Thename
parameter can be used to name the window, andspecs
defines the window’s features (size, position, etc.).window.close()
: Closes the current browser window or tab.window.scrollTo(x, y)
: Scrolls the window to a specific coordinate.window.scrollBy(x, y)
: Scrolls the window by a specified amount relative to the current position.
4. Window Event Handling
window.onload
: An event handler for when the entire window, including all dependent resources (like images), has finished loading.window.onresize
: An event handler for when the window is resized.window.onscroll
: An event handler for when the window is scrolled.
5. Timers
window.setTimeout(function, milliseconds)
: Executes a function after a specified delay.window.setInterval(function, milliseconds)
: Repeatedly executes a function at specified intervals.window.clearTimeout(timeoutID)
: Cancels a timeout set withsetTimeout()
.window.clearInterval(intervalID)
: Cancels an interval set withsetInterval()
.
6. Frame Management
window.frames
: A collection of frames or iframes within the window. You can access individual frames using array-like indexing (e.g.,window.frames[0]
).
7. Error Handling
window.onerror
: An event handler for global error handling. It allows you to catch and handle errors that occur in the script.