JavaScript Window

JavaScript Window - The Browser Object Model

The Browser Object Model (BOM) enables JavaScript to interact with the browser, independent of the web page content itself.

The Browser Object Model (BOM)

While the BOM historically lacked a single, formal standard like the DOM, many of its features are now well-defined in the HTML Living Standard by WHATWG, ensuring cross-browser compatibility for core functionalities.

Modern browsers have largely converged on a common set of methods and properties for JavaScript interactivity, forming the basis of what we refer to as the BOM.

The Window Object

The window object is central to the BOM and is supported by all browsers. It represents the browser’s window or tab containing a web page.

In a browser environment, the window object is the global object. All global JavaScript variables, functions, and objects automatically become properties and methods of the window object.

For example, a global variable myGlobalVar can also be accessed as window.myGlobalVar.

Similarly, global functions are methods of the window object.

The document object, which is the entry point to the HTML DOM, is itself a property of the window object:

window.document.getElementById("header");

Because window is the global object, you can omit window. when accessing its properties and methods directly:

document.getElementById("header");

Window Size and Screen Information

You can determine the size of the browser window’s viewport (the area where the web page is displayed, excluding toolbars and scrollbars) using standard properties:

• window.innerWidth - the inner width of the browser window’s viewport.
• window.innerHeight - the inner height of the browser window’s viewport.

These properties are universally supported in modern browsers.

For example, to get the viewport dimensions:

const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
console.log(`Viewport dimensions: ${viewportWidth}x${viewportHeight}`);

To get information about the user’s entire screen (not just the browser window), you can use the window.screen object:

• screen.width - the total width of the user’s screen.
• screen.height - the total height of the user’s screen.
• screen.availWidth - the available width for applications (excluding OS features like taskbars).
• screen.availHeight - the available height for applications.

Other Useful Window Properties and Methods

The window object provides many other useful properties and methods for browser interaction:

• window.location: Provides information about the current URL and allows navigation (e.g., window.location.href, window.location.reload()).
• window.navigator: Contains information about the browser (e.g., user agent string, geolocation).
• window.history: Allows interaction with the browser’s session history (e.g., history.back(), history.forward()).
• window.console: Accesses the browser’s debugging console (e.g., console.log()).
• window.alert(message): Displays a simple modal dialog with a message.
• window.confirm(message): Displays a modal dialog with a message and OK/Cancel buttons, returning true or false.
• window.prompt(message, defaultValue): Displays a modal dialog that prompts the user for input.
• window.setTimeout(function, milliseconds): Executes a function after a specified delay.
• window.setInterval(function, milliseconds): Repeatedly executes a function at specified intervals.
• window.open(url, name, features): Opens a new browser window or tab. Its behavior can be affected by browser pop-up blockers.
• window.close(): Closes the current window (usually only effective for windows opened by a script).
• window.scrollX / window.scrollY: Returns the number of pixels that the document has been scrolled horizontally and vertically.
• window.scrollTo(x, y) or window.scrollTo(options): Scrolls the window to a particular set of coordinates in the document.

Note: Methods like window.moveTo() and window.resizeTo() that attempt to move or resize the browser window are often restricted by modern browsers for security and user experience reasons, and may not work as expected or at all.