Signup/Sign In

JavaScript Window Object

JavaScript Window is a global Interface (object type) which is used to control the browser window lifecycle and perform various operations on it.

A global variable window, which represents the current browser window in which the code is running, is available in our JavaScript code and can be directly accessed by using window literal.

It represents a window containing a webpage which in turn is represented by the document object. A window can be a new window, a new tab, a frame set or individual frame created with JavaScript.

In case of multi tab browser, a window object represents a single tab, but some of its properties like innerHeight, innerWidth and methods like resizeTo() will affect the whole browser window.

Whenever you open a new window or tab, a window object representing that window/tab is automatically created.

The properties of a window object are used to retrieve the information about the window that is currently open, whereas its methods are used to perform specific tasks like opening, maximizing, minimizing the window, etc.

To understand the window object, let's use it to perform some operations and see how it work.

Using JavaScript Window Object

Let's use the JavaScript window object to create a new window, using the open() method. This method creates a new window and returns an object which further can be used to manage that window.

In the code above, we have used the window object of the existing window to create a new window using the open() method. In the open() method we can provide the URL to be opened in the new window(we can keep it blank as well), name of the window, the width and the height of the window to be created.

Following is the syntax for the window object open() method:

let newWindow = window.open(url, windowName, [windowFeatures]);

We can provide, as many properties as we want, while creating a new window.

When the open() method is executed, it returns the reference of the window object for the new window created, which you can assign to a variable, like we have done in the code above. We have assigned the value returned by the window.open() method to the win variable.

The we have used the win variable to access the new window, like getting the name of the window, getting location of the window which opened the new window etc.

There are many properties and methods for the window object, which we have listed down below.

Find Dimensions of a Window

We can get the height and width of a window by using the window object built-in properties.

We can also access the document object using a window object(window.document) which gives us access to the HTML document, hence we can add new HTML element, or write any content to the document, like we did in the example above.

JavaScript Window Object Properties

The wondow object properties refer to the variables created inside the windows object.

In JavaScript, all the available data is attached to the window object as properties.

We can access window object's properties like: window.propertyname where propertyname is the name of property.

A table of most popular window object properties is given below:

Property Description
closed returns a boolean value that specifies whether a window has been closed or not
document specifies a document object in the window.
history specifies a history object for the window.
frames specifies an array of all the frames in the current window
defaultStatus specifies the default message that has to be appeared in the status bar of Window.
innerHeight specifies the inner height of the window's content area.
innerWidth specifies the inner width of the window's content area.
length specifies the number of frames contained in the window.
location specifies the location object for window
name specifies the name for the window
top specifies the reference of the topmost browser window.
self returns the reference of current active frame or window.
parent returns the parent frame or window of current window.
status specifies the message that is displayed in the status bar of the window when an activity is performed on the Window.
screenleft specifies the x coordinate of window relative to a user's monitor screen
screenTop Specifies the y coordinate of window relative to a user's monitor screen
screenX specifies the x coordinate for window relative to a user's monitor screen
screenY Specifies the y coordinate for window relative to a user's monitor screen

Let's take an example to see a few of these properties in action:

In the example above, we have created a new window, just to make you familiar with new window creation and also, to make you understand that when we create a new window, then the current window has a different window object and the new window will have a separate window object.

We have then tried to access some properties of the new window created.

TASK: Try some more windows property in the above code playground to practice and understant how window properties work.

JavaScript Window Object Methods

The window object methods refer to the functions created inside the Window Object, which can be used to perform various actions on the browser window, such as how it displays a message or gets input from the user.

Below we have listed down some of the most commonly used window object methods:

Method Description
alert() specifies a method that displays an alert box with a message an OK button.
blur() specifies a method that removes the focus from the current window.
clearInterval() specifies a method that 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

Let's take an example and see a few of the above methods in action:

In the example above, we have used some window methods, you can try more methods. In the next tutorial we will learn about the History object, which is a property of the window object.



About the author:
I like writing content about C/C++, DBMS, Java, Docker, general How-tos, Linux, PHP, Java, Go lang, Cloud, and Web development. I have 10 years of diverse experience in software development. Founder @ Studytonight