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
The Window Object
The window object represents an open window in a browser.
If a document contain frames ( tags), the browser creates one window object for the HTML document, and one additional window object for each frame.
Window Object Properties
| Property | Description |
|---|---|
| closed | Returns a boolean true if a window is closed. |
| console | Returns the Console Object for the window. See also The Console Object. |
| defaultStatus | Deprecated. |
| document | Returns the Document object for the window. See also The Document Object. |
| frameElement | Returns the frame in which the window runs. |
| frames | Returns all window objects running in the window. |
| history | Returns the History object for the window. See also The History Object. |
| innerHeight | Returns the height of the window’s content area (viewport) including scrollbars |
| innerWidth | Returns the width of a window’s content area (viewport) including scrollbars |
| length | Returns the number of elements in the current window |
| localStorage | Allows to save key/value pairs in a web browser. Stores the data with no expiration date |
| location | Returns the Location object for the window. See also the The Location Object. |
| name | Sets or returns the name of a window |
| navigator | Returns the Navigator object for the window. See also The Navigator object. |
| opener | Returns a reference to the window that created the window |
| outerHeight | Returns the height of the browser window, including toolbars/scrollbars |
| outerWidth | Returns the width of the browser window, including toolbars/scrollbars |
| pageXOffset | Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window |
| pageYOffset | Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window |
| parent | Returns the parent window of the current window |
| screen | Returns the Screen object for the window See also The Screen object |
| screenLeft | Returns the horizontal coordinate of the window relative to the screen |
| screenTop | Returns the vertical coordinate of the window relative to the screen |
| screenX | Returns the horizontal coordinate of the window relative to the screen |
| screenY | Returns the vertical coordinate of the window relative to the screen |
| sessionStorage | Allows to save key/value pairs in a web browser. Stores the data for one session |
| scrollX | An alias of pageXOffset |
| scrollY | An alias of pageYOffset |
| self | Returns the current window |
| status | Deprecated. Avoid using it. |
| top | Returns the topmost browser window |
Window Object Methods
| Method | Description |
|---|---|
| addEventListener() | Attaches an event handler to the window |
| alert() | Displays an alert box with a message and an OK button |
| atob() | Decodes a base-64 encoded string |
| blur() | Removes focus from the current window |
| btoa() | Encodes a string in base-64 |
| clearInterval() | Clears a timer set with setInterval() |
| clearTimeout() | Clears a timer set with setTimeout() |
| close() | Closes the current window |
| confirm() | Displays a dialog box with a message and an OK and a Cancel button |
| focus() | Sets focus to the current window |
| getComputedStyle() | Gets the current computed CSS styles applied to an element |
| getSelection() | Returns a Selection object representing the range of text selected by the user |
| matchMedia() | Returns a MediaQueryList object representing the specified CSS media query string |
| moveBy() | Moves a window relative to its current position |
| moveTo() | Moves a window to the specified position |
| open() | Opens a new browser window |
| print() | Prints the content of the current window |
| prompt() | Displays a dialog box that prompts the visitor for input |
| removeEventListener() | Removes an event handler from the window |
| requestAnimationFrame() | Requests the browser to call a function to update an animation before the next repaint |
| resizeBy() | Resizes the window by the specified pixels |
| resizeTo() | Resizes the window to the specified width and height |
| scroll() | Deprecated. This method has been replaced by the scrollTo() method. |
| scrollBy() | Scrolls the document by the specified number of pixels |
| scrollTo() | Scrolls the document to the specified coordinates |
| setInterval() | Calls a function or evaluates an expression at specified intervals (in milliseconds) |
| setTimeout() | Calls a function or evaluates an expression after a specified number of milliseconds |
| stop() | Stops the window from loading |