Window Object in JavaScript
The window object in JavaScript stands for the current web page that is being seen in a browser window. It gives access to the browser’s methods and attributes as the global object in the browser environment. The window object is the global object in the web browser environment. It represents the current window or frames that the JavaScript code is running in.
A browser window is represented by the window object. The browser produces one window object for the HTML content and one extra window object for each frame when a document contains frames (iframe> elements).
Using the document.defaultView property, one may get a window for a certain document. The window object’s characteristics include global variables. The window object’s methods are known as global functions.
Property Name
Description
Example 1: We will use the console property in this example to show how it works.
Javascript
window.location object is a useful tool for interacting with the current URL of the window and redirecting the user to a different URL.
Example 2: In this example, we’ll use the document property in this example to show how it works:
Javascript
In JavaScript, the window.document property refers to the current HTML document that is being displayed in a window or frame. It allows you to access and manipulate the content of the HTML document, including the element nodes, attributes, and text content.
Methods: A method in JavaScript is a function connected to an object. You may conduct operations or compute values by calling methods on objects.
NOTE: Depending on the attributes, a parameter could have any value, including a string, number, object, and more.
Here is a list of some of the methods of the window object:
| Property Name | Description |
| window.open() | This method opens a new browser window or tab. |
| window.close() | This method closes the current window or tab. |
| window.alert() | This method displays an alert message to the user. |
| window.prompt() | This method displays a prompt message to the user and waits for their input. |
| window.confirm() | This method displays a confirm message to the user and waits for their response.window.focus: brings the current window or tab to the front. |
| window.blur() | Sends the current window or tab to the back. |
| window.postMessage() | Sends a message to the window or frame that is targeted by the specified WindowProxy object. |
| window.scrollTo() | Scrolls the window or frame to a specific position. |
| window.scrollBy() | Scrolls the window or frame by a specific number of pixels. |
| window.resizeTo() | Resizes the window to a specific size. |
| window.resizeBy() | Resizes the window by a specific number of pixels. |
| window.atob() | A base-64 encoded string is decoded via atob(). |
| window.btoa() | Base-64 encoding is done with btoa(). |
| window.clearInterval() | A timer set with setInterval() is reset. |
| window.clearTimeout() | The function clearTimeout() resets a timer specified with setTimeout(). |
| window.focus() | It switches the focus to the active window. |
| window.getComputedStyle() | This function returns the element’s current computed CSS styles. |
| window.getSelection() | It provides a Selection object corresponding to the user-selected text selection range. |
| window.matchMedia() | The provided CSS media query string is represented by a MediaQueryList object created by the matchMedia() function. |
| window.moveBy() | Relocates a window with respect to its present location. |
| window.moveTo() | Relocates a window to the given location. |
| window.print() | Displays what is currently displayed in the window. |
| window.requestAnimationFrame() | Before the subsequent repaint, the browser is asked to invoke a function to update an animation using the requestAnimationFrame() method. |
| window.setInterval() | At predetermined intervals, setInterval() calls a function or evaluates an expression (in milliseconds). |
| window.setTimeout() | When a certain amount of milliseconds have passed, the setTimeout() method calls a function or evaluates an expression. |
| window.stop() | It halts the loading of the window. |
Example 3: We’ll use the window.alert method in this example to show how it works:
JavaScript Window — The Browser Object Model
The Browser Object Model (BOM) allows JavaScript to «talk to» the browser.
The Browser Object Model (BOM)
There are no official standards for the Browser Object Model (BOM).
Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM.
The Window Object
The window object is supported by all browsers. It represents the browser’s window.
All global JavaScript objects, functions, and variables automatically become members of the window object.
Global variables are properties of the window object.
Global functions are methods of the window object.
Even the document object (of the HTML DOM) is a property of the window object:
Window Size
Two properties can be used to determine the size of the browser window.
Both properties return the sizes in pixels:
- window.innerHeight — the inner height of the browser window (in pixels)
- window.innerWidth — the inner width of the browser window (in pixels)
The browser window (the browser viewport) is NOT including toolbars and scrollbars.
Example
Other Window Methods
- window.open() — open a new window
- window.close() — close the current window
- window.moveTo() — move the current window
- window.resizeTo() — resize the current window