Window in Javascript

In this article, we will learn about the Window object in Javascript. We will also learn about the different properties and methods of the Window object.

Javascript Window

The Window object represents the browser window. It is the topmost object in the browser's window hierarchy. It is supported by all browsers.

The window object represents the frame or window in which the webpage is contained in the browser. It is a Global object, its properties and functions can be accessed without referring to it.

Example: window.alert() is used to alert something but we can directly use alert() without referring to the window object.

The window is the root object, even the document is the property of the window object. You can use it to find out screen height, screen width, history, localStorage, location, events, etc.

Everything that is visible and non-visible on a webpage all are part of the window.

// Both are the same: with and without window
window.alert("Page Loaded!");
alert("Page Loaded!");

// Both are the same
window.console.log("Hello World!");
console.log("Hello World!");

// Both are the same
window.document.getElementById("id1");
document.getElementById("id1");

Window Properties

The window object has lots of properties that can be used to get information about the window. Some of the most commonly used properties are listed below.

Window Methods

The window object has lots of methods that can be used to perform different tasks. Some of the most commonly used methods are listed below.

Window Events

The window object has lots of events that are triggered when a specific action is performed. Some of the most commonly used events are listed below.

Few Examples of Window Object

Here are some of the operations that can be performed using the Window object.

Getting the Size of the Browser Window

The window object has 4 different properties to get the height and width of the window.

Two properties represent the inner dimensions of the window:

• innerHeight
• innerWidth

Two properties represent the outer dimensions of the window:

• outerHeight
• outerWidth

var ih = window.innerHeight;
var iw = window.innerWidth;
var oh = window.outerHeight;
var ow = window.outerWidth;

console.log("innerHeight: " + ih);
console.log("innerWidth: " + iw);
console.log("outerHeight: " + oh);
console.log("outerWidth: " + ow);

Open a new window using javascript

The window interface has the open() method which loads a new window or new tab on the browser with a given URL.

Syntax:

window.open(URL, windowName, windowFeatures);

• URL - The URL of the page to open in the new window. If no URL is specified, a new window with about:blank is opened.
• windowName (Optional) - window name is given as a target for hyperlinks and forms. However it is not required, the window need does not to have name
• windowFeatures (Optional) - This contains comma-separated list of features in form of "name=value". These features include options such as position, size, whether or not to include a toolbar, etc.

window.open("https://www.tutorialstonight.com", "TutorialsTonight", "innerWidth=500,innerHeight=700,location=yes,scrollbars=yes");

Resize a window

The window interface has the resizeTo() method which resizes the window to the specified width and height.

Syntax:

window.resizeTo(width, height);

Here is an example:

var myWindow;

function openNew() {
  myWindow = window.open("", "", "innerWidth=100,innerHeight=300");
}

function resizeIt() {
  myWindow.resizeTo(300, 400);
  myWindow.focus();
}

Close window

To close a window use the close() method referring to the window object which you want to close.

var myWindow;

function openNew() {
  myWindow = window.open("", "", "innerWidth=200,innerHeight=300");
}

function closeIt() {
  myWindow.close();
}

In the above example, we store the reference of the window in myWindow variable and use it as a reference to close it.

1. What is JavaScript window?

   JavaScript window is the global object in the browser. It is the outermost object in the browser. It is the parent of all other objects in the browser. Everything in the browser is a child of a window object.

2. How can we open a new window in JavaScript?

   Use window.open() method to open a new window in JavaScript. It takes three parameters: URL, window name, and window features.