June 13, 2020

How to Close Tab/Window Created Using Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to close tab or window created using javascript. As you already know, in almost every browser, you can open as many tabs or windows as you want, and depending upon the browser and kind of website you are visiting, your CPU and RAM usage will increase.

You can create a new window or tab easily using an anchor element in the HTML, but at the same time, you lack the ability to close that particular window or tab programmatically. This is where javascript comes to into play.

To open a new window or tab using javascript, we can make use of the open() method. This method is part of the window object and it takes 4 optional parameters. After execution, this method returns a reference to the newly created window or tab. We can use that reference to close it programmatically.

In the following example, we have 2 button elements, one to create a new tab or window and another one to close it on click. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file (div and button).
The 2 button elements have “Open” and “Close” as innerText respectively.
The div element is just a wrapper for the button elements.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div>
    <button id="open">Open</button>
    <button id="close">Close</button>
  </div>

  <script src="script.js"></script>
  
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button {
    padding: 10px 20px;
}

Javascript

We have selected both the button elements using the document.querySelector() method and stored them in the btnOpen and btnClose variables respectively.
We have a global variable myTab which is undefined initially.
We have attached a click event listener to both the button elements.

In the event handler function of the open button, we are calling the open() method and passing 3 parameters. The first parameter specifies a URL that we want to open. The second parameter specifies the target attribute or name of the window, we are passing “_blank” which means we want it to open in a new tab. The third parameter takes a list of a comma-separated list of items with no white spaces in between. I suggest you to have a look over MDN docs to know more about the accepted list of items. In our case, we are specifying the height and width of the new window to be 500px. Since we are providing a third parameter, it will no longer open a new tab, but a new window. If you want to open a tab, then simply omit this third parameter since it is optional.
We are storing the reference of the newly created window in the myTab variable.
We are using setTimeout() method with a delay of 3 seconds. In the anonymous function, we are checking whether myTab is defined or not using the if statement. If yes, then we are closing the newly created window by calling the close() method.

In the event handler function of the close button, we are doing the same thing that we were doing in the anonymous function.

let btnOpen = document.querySelector('#open');
let btnClose = document.querySelector('#close');


let myTab;


btnOpen.addEventListener('click', ()=>{
    myTab = window.open('https://www.google.com', '_blank', 'height=500,width=500');

    setTimeout(() => {
        if(myTab) myTab.close();
    }, 3000);
});


btnClose.addEventListener('click', ()=>{
    if(myTab) myTab.close();
});

You May Also Like: