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 the window object.

2. Window Properties

  • window.document: The document 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 as href (full URL), pathname (path part of the URL), search (query string), and hash (fragment identifier).

  • window.history: Provides access to the session history of the browser. You can navigate through the history with methods like back(), forward(), and go().

  • window.navigator: Contains information about the browser itself, such as userAgent (browser string), platform (operating system), and geolocation (geographical location).

  • window.screen: Provides information about the screen's size and color depth, such as screen.width and screen.height.

  • window.localStorage: Provides access to the local storage of the browser for storing data persistently across sessions.

  • window.sessionStorage: Similar to localStorage, 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, returning true if OK is pressed and false 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. The name parameter can be used to name the window, and specs 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 with setTimeout().

  • window.clearInterval(intervalID): Cancels an interval set with setInterval().

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.