In case of multi tab browser, a window object represents a single tab, but some of its properties like
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.
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.
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
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.
The wondow object properties refer to the variables created inside the windows object.
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:
|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.
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:
||specifies a method that displays an alert box with a message an OK button.|
||specifies a method that removes the focus from the current window.|
||specifies a method that clears the timer, which is set by using setInterval() method.|
||specifies a method that closes the current window.|
||specifies a method that displays a dialogue box with a message and two buttons OK and Cancel|
||specifies a method that sets the focus on current window.|
||specifies a method that opens a new browser window|
||specifies a method that moves a window to a specified position|
||specifies a Method that moves a window relative to its current position.|
||specifies a method that prompts for input.|
||specifies a method that sends a print command to print the content of the current window.|
||specifies a method that evaluates an expression after a specified number of milliseconds.|
||specifies a method that evaluates an expression at specified time intervals (in milliseconds)|
||specifies the amount by which the window will be resized|
||used for dynamically resizing the window|
||scrolls the window to a particular place in document|
||scrolls the window by the given value|
||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.