JavaScript Window Object

JAVASCRIPT BASICS

• Introduction to JavaScript
• Javascript Features
• JavaScript in HTML
• JavaScript Syntax
• Output in JavaScript
• JavaScript Variables
• Javascript let Keyword
• JS Literals and Keywords
• JavaScript Data Types
• JavaScript Operators
• JavaScript Events
• Javascript const Keyword

JAVASCRIPT FLOW CONTROL AND LOOPS

• JS if, else and else if
• JavaScript for Loop
• JS while and do-while loop
• JS Switch case
• JS break and continue

JAVASCRIPT ADVANCED

• JavaScript Strings
• JavaScript String Methods
• JavaScript Array
• JavaScript Regular Expression
• JavaScript Popup Boxes
• JavaScript Functions
• JavaScript Default Parameters
• JavaScript Rest Parameters
• JavaScript Arrow Function
• JavaScript Errors
• JavaScript Error Handling
• JavaScript Cookies

JAVASCRIPT OBJECT

• JavaScript Objects
• JavaScript User-defined Object
• JavaScript Boolean Object
• JavaScript Number Object
• JavaScript Math Object
• JavaScript Date Object
• JavaScript RegExp Object

JAVASCRIPT WEB API AND INTERFACES

• JavaScript Browser Object
• JavaScript Window Object
• JavaScript History Object
• JavaScript Navigator Object
• JavaScript Location Object
• JavaScript Screen Object
• JavaScript Document 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.

Click to open a new Window:

    <button onclick="createWindow()">Open a Window</button>
    <p id="result"></p>

    <script>
    function createWindow() {
        let url = "https://studytonight.com";
        let win = window.open(url, "My New Window", "width=300, height=200");
        document.getElementById("result").innerHTML = win.name + " - " + win.opener.location;
    }
    </script>

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.propertynamewhere 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

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

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.

< prev

next >