Window object represents the window in a browser. JavaScript environment has global object. Window object is a global object. Any variables created with global scope are properties of this window object and functions are methods of it. The window object methods are used to retrieve the information from the browser window.
Browser Object Model:
BOM(Browser Object Model) is a collection of properties and methods that contains information about the browser. Using window object we can find the browser name, dimension of window, page history etc., BOM is also used to create pop-up window.
JavaScript can be run in different environments. But BOM makes sense only in browser environments. In environments such as node.js we don’t have window object but we still have global object.
Window Object Methods:
| Method | Description |
| alert() | displays an alert box with a message an OK button. |
| blur() | removes the focus from the current window. |
| clearInterval() | clears the timer, which is set by using setInterval() method. |
| close() | specifies a method that closes the current window. |
| confirm() | specifies a method that displays a dialogue box with a message and two buttons OK and Cancel |
| focus() | specifies a method that sets the focus on current window. |
| open() | specifies a method that opens a new browser window |
| moveTo() | specifies a method that moves a window to a specified position |
| moveBy() | specifies a Method that moves a window relative to its current position. |
| prompt() | specifies a method that prompts for input. |
| print() | specifies a method that sends a print command to print the content of the current window. |
| setTimeout() | specifies a method that evaluates an expression after a specified number of milliseconds. |
| setInterval() | specifies a method that evaluates an expression at specified time intervals (in milliseconds) |
| resizeBy() | specifies the amount by which the window will be resized |
| resizeTo() | used for dynamically resizing the window |
| scroll() | scrolls the window to a particular place in document |
| scrollBy() | scrolls the window by the given value |
| stop() | this method stops window loading |
Example:
1)window.alert("Hello Abaython!!");
2) const myWind = window.open("", "", "width=250, height=200");
myWind.blur();
3) const myWindow = window.open("", "", "width=250, height=200");
myWindow.focus();
4) <!DOCTYPE html>
<html>
<body>
<h2>The setInterval() Method</h2>
<p id="demo"></p>
<script>
const element = document.getElementById("demo");
setInterval(function () {
element.innerHTML += "Abaython</br>"
}, 500);
</script>
</body>
</html>
Output:
Window Object Properties:
| Property Name | Description |
| window.document | The HTML document that is shown in the window is represented by the Document object, which is referred to by the document property. |
| window.console | The console gives the window’s Console Object back. |
| window.location | The location attribute makes reference to the Location object, which has data about the page’s current URL. |
| window.defaultStatus | It is now Abandoned. |
| window.closed | If a window is closed, it returns a true boolean value. |
| window.frameElement | It gives the window’s current frame back. |
| window.frame | returns every window item currently active in the window. |
| window.history | Retrieves the window’s History object. |
| window.length | It gives the number of iframe> elements currently present in the window. |
| window.localStorage | provides the ability to store key/value pairs in a web browser. stores data without a time. |
| window.opener | It returns a pointer to the window that created the window in the opener function. |
| window.name | Returns or sets a window’s name. |
| window.parent | Brings up the current window’s parent window. |
| window.sessionStorage | Provides the ability to store key/value pairs in a web browser. Contains data for a single session. |
| window.status | It is now Deprecated. Don’t employ it. |
| window.top | It provides the top-most browser window back. |
| window.screen | The screen attribute makes reference to the Screen object, which stands in for the screen that the browser is shown on. |
| window.history | The History object, which includes details about the current page’s browsing history, is the subject of the history property. |
| window.screenLeft: | The x-coordinate of the current window relative to the screen. |
| window.screenTop | The y-coordinate of the current window relative to the screen. |
| window.screenX | The x-coordinate of the current window relative to the screen (deprecated). |
| window.screenY | The y-coordinate of the current window relative to the screen (deprecated). |
| window.navigator | An object representing the browser and its capabilities |
Example:
//console property console.log(window.location)
Output:
Location {ancestorOrigins: DOMStringList, href: ‘chrome://new-tab-page/’, origin: ‘chrome://new-tab-page’, protocol: ‘chrome:’, host: ‘new-tab-page’, …}
// document property window.document
Output:
Window object represents the browser window itself. window object is an important part of the JavaScript language and is frequently used in web development to manipulate the web browser and the document being displayed. We have also seen about its various methods and properties.