A thorough explanation of the basics and usage of JavaScript Window objects

This section provides a detailed explanation of the Window object, which is necessary to operate web pages with JavaScript.

I’ve heard of a Window object, but what exactly is it?

The Window object is one of the important objects for manipulating web pages with JavaScript.

What is a Window object?

A Window object is a JavaScript object that represents a window or tab displayed on a web browser.

When using JavaScript on a web page, use this Window object to obtain information such as the position and size of the window, the URL of the displayed web page, and to change the displayed contents of the window. can do.

For example, to obtain the URL of the currently displayed web page, refer to the location property of the Window object as shown below.

console.log(window.location.href);

The Window object is also used to open a new window. You can open a new window by calling the open() method as shown below.

window.open('http://example.com/');

The Window object is an important object that is essential for operating web pages, and it is essential to understand it when developing web pages using JavaScript.

Window object properties and methods

　The Window object has various properties and methods. Here we will introduce some representative ones.

properties

window.innerHeight / window.innerWidth

　You can get the inner height and width of the window. For example, you can get the current window height as follows:

console.log(window.innerHeight);

window.location

　Provides information about the URL of the currently displayed web page. By using location.href, you can get the URL of the currently displayed page.

console.log(window.location.href);

window.document

　Returns the document object of the currently displayed web page. By using this object, you can access and change the contents of the web page.

console.log(window.document.title);

method

window.alert()

An alert dialog can be displayed. Use it like this:

window.alert('Hello, World!');

window.open()

You can open a new window. Use it like this:

window.open('http://example.com/');

window.close()

Allows you to close the current window. Use it like this:

window.close();

The properties and methods of the Window object have various functions, but it is important for beginners to understand the typical ones.

How to operate a web page using the Window object

Below is a detailed explanation of how to operate a web page using the Window object.

Page transition

You can use the location property of the Window object to transition between web pages.

window.location.href = 'https://www.google.com/';

You can also perform page transitions in the same way using the location.assign() method.

// Transition to Google
window.location.assign('https://www.google.com/');

Reload page

To reload a web page, use the location.reload() method of the Window object.

// Reload the page
window.location.reload();

However, if you use this method, the latest information may not be reflected because cache is used. In that case, to force the cache to be ignored and obtain the latest information, pass an argument to the reload() method as shown below.

// Ignore the cache and reload the page
window.location.reload(true);

open new window

You can open a new window using the Window object’s open() method.

// Open new window
window.open('https://www.google.com/');

This method allows you to specify the window URL, size, position, display/hide of the status bar, etc. as arguments.

close the window

You can close the current window using the Window object’s close() method.

// close a window
window.close();

However, this method only works on windows opened from scripts. Additionally, windows opened by user actions cannot be closed.

The above is an example of how to operate a web page using the Window object. The Window object has many other properties and methods, so be sure to research them and learn how to use them as needed.

summary

We explained the Window object, which is necessary to operate web pages.

The Window object is a very important object for manipulating web pages with JavaScript. In order to obtain and change the information and status of a web page, it is necessary to make good use of this object. Let’s make full use of these properties and methods to create more user-friendly and attractive web pages.