How to Close Tab/Window Created Using JavaScript.

While surfing the internet, you often come across situations where you want to close a particular tab/window after a specific time interval or after the task is accomplished. Every opened tab or window consumes working memory or RAM, which can eventually lead to serious performance issues and slow down other functionalities. In such cases, JavaScript offers the great functionality of closing the created tab/window automatically.

This article will discuss the methods to close tabs and windows in JavaScript.

How to Close Tab/Window Created Using JavaScript?

To close tab/window created using JavaScript, the following approaches can be utilized:

“window.open()” and “setTimeout()” methods
“window.open()” method and “onclick” event

Go through the mentioned methods one by one!

Method 1: Close Tab Created in JavaScript Using window.open() and setTimeout() Methods

The “window.open()” method opens a new browser window, or a new tab, based on the added values and the “setTimeout()” method accesses a function after a specified set time. These methods can be used in combination to open a particular tab based on the URL and close it by setting a timeout value.

Syntax

window.open(URL, name, specs, replace)

In the given syntax, “URL” is the page’s URL, “name” is the target attribute, “specs” refer to a comma-separated list of items, and “replace” indicates whether the URL creates a new entry or replaces it.

setTimeout(function, milliseconds, par1, par2)

In the given syntax, “function” refers to the function that needs to be invoked, “milliseconds” is the specific time interval to execute, and “par1”, “par2” are the additional parameters.

Look at the following example for a better understanding.

Example

First, add the specified heading in the “<h2>” tag and create a button with an onclick event which will invoke the “openTab()” method when clicked:

<h2>Close the Tab</h2>

<button onclick= "openTab()">Click Here</button>

Now, define a function named “openTab()”. In its definition, call the “window.open()” method to open a new tab with respect to the specified URL. Lastly, apply the “setTimeout()” method on the function named “closeTab()” to close the tab using the “close()” method. This will result in closing the particular tab after five seconds:

function openTab(){

var closeWindow= window.open("https://www.google.com");

setTimeout (function closeTab(){

closeWindow.close();

},5000);

}

The output of the above implementation will result as follows:

If you want to close a created window instead, utilize the following method:

Method 2: Close Window Created in JavaScript Using window.open() Method and onclick Event

The “window.open() method opens a new browser window, or a new tab, based on the set parameter values as discussed in the previous method, whereas an “onclick” event occurs when the user clicks on an element. These methods can be used in combination to allocate separate functions for opening and closing the new window and set the dimensions of the created window in parameters.

Syntax

object.onclick= closeWindow(){myScript};

In the above syntax, “closeWindow()” refers to the accessed function.

The following example illustrates the stated concept.

Example

Firstly, include a heading and create two different buttons for opening and closing the window respectively with an onclick event referring to the specified functions:

<h2>Close Window using JavaScript</h2>

<button onclick= "openWindow()">Click Here to Open a New Window</button>

<button onclick= "closeWindow()">Click Here to Close a New Window</button>

Next, define a function named “openWindow()”. In its definition, specify the URL which will be opened in the new window and specify the parameters “width” and “height” values to set the dimensions of the new window:

var open;

function openWindow(){

open= window.open("https://www.google.com", "_blank", "width= 786, height= 786");

}

Last, define the closeWindow()” function and apply the “close()” method referring to the variable named “open”, which opens the window in the previous function. This will result in closing the opened window when the button is clicked:

function closeWindow(){

open.close();

}

Output

We have discussed the simplest methods for closing the tab and window created using JavaScript.

Conclusion

To close a tab/window created using JavaScript, utilize the “window.open()” and “setTimeout()” methods for closing a created tab after a specified time or the window.open() method with parameters and “onclick” event involving separate buttons for each of the functionality and setting the dimensions of the created window in parameters. This write-up explained the methods to close a tab/window created using JavaScript.

How to Close Tab/Window Created Using JavaScript.