Window: window property
The window property of a Window object points to the window object itself.
Thus, the following expressions all return the same window object:
.window; window.window.window; window.window.window.window; // …
In web pages, the window object is also a global object. This means:
- Global variables of your script are, in fact, properties of window :
var global = data: 0 >; alert(global === window.global); // displays "true"
setTimeout("alert('Hi!')", 50); // equivalent to using window.setTimeout(). alert(window === window.window); // displays "true"
The point of having the window property refer to the object itself, was likely to make it easy to refer to the global object. Otherwise, you’d have to do a manual let window = this; assignment at the top of your script.
Another reason, is that without this property you wouldn’t be able to write, for example, » window.open(‘http://google.com/’) «. You’d have to use «open(‘http://google.com/’)» instead.
Yet another reason to use this property, is for libraries which wish to offer OOP-versions, and non-OOP versions (especially JavaScript modules). For example, if we refer to «this.window.location.href», a JavaScript module could define a property called «window» inside of a class it defined (since no global «window» variable exists for it by default) which could be created after passing in a window object to the module class’ constructor. Thus, «this.window» inside of its functions would refer to that window object. In the non-namespaced version, «this.window» would refer back to «window», and also be able to readily get the document location. Another advantage, is that the objects of such a class (even if the class were defined outside of a module) could change their reference to the window at will, they would not be able to do this if they had hard-coded a reference to «window». The default in the class could still be set as the current window object.
Specifications
Browser compatibility
BCD tables only load in the browser
Found a content problem with this page?
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 |