Teach with us

How to close a current tab in a browser window using JavaScript?

We will learn to close the browser window using JavaScript in this tutorial. Suppose users have opened your website in 2 tabs and don’t want to allow it, then you can close one tab automatically using JavaScript.

Also, if you have noticed that some web apps automatically open the browser window to capture a face, it closes automatically when you capture the image by clicking the button. It’s all we can do using JavaScript.

This tutorial will teach different examples of closing the current tab in a browser window using JavaScript.

Note − JavaScript never allows developers to close the window opened by the users. It is due to some security issues. So, programmers can only close the browser window opened using the open() method of JavaScript.

Syntax

You can follow the syntax below to use the close() method to close the browser’s window.

let new_window = window.open(URL, width, height);
new_window.close();

In the above syntax, we have stored the returned value in the new_window variable while creating it. After that, we used the close() method to close the newly opened window.

Example

In this example, we have two buttons; one is to open a new tab, and another is to close a new tab that is opened using JavaScript.

Users need first to open the tab using JavaScript by clicking the open new tab button. After they can click on the close new tab button, observe that it automatically closes the tab.

<html>
<body>
   <h2>Using the <i>window.close()</i> method to close the browser's tab</h2>
   <p>Click "Open New Tab" to open a page in new tab and click "Close New Tab" to colse the opened tab</p>
   <button id = "openTab" onclick = "openTab()">Open New Tab </button><br><br>
   <button id = "closeTab" onclick = "closeTab()">Close New Tab</button>
   <script>
      // creating the variable to store the tab
      var new_tab;
      function openTab() {
         // open a new tab
         new_tab = window.open("https://www.tutorialspoint.com/answers/shubham-vora");
      }
      function closeTab() {
         // close tab
         new_tab.close();
      }
   </script>
</body>
</html>

Example

In the example below, we have created two buttons, like the above example, to open and close the tab. However, in this example, we have also added ‘_blank’ as a parameter of the open method, which will open a new window rather than a new tab.

Next, users can click the new window button to close the pop-up window.

<html>
<body>
   <h2>Using the <i>window.close() method</i> to close the browser's window.</h2>
   <p>Click "Open New Window" to open the page in new window and click "Close New Window" to colse the opened window</p>
   <button id = "openWidnow" onclick = "openWindow()"> open new Window</button><br><br>
   <button id = "closeWidnow" onclick = "closeWindow()">Close new Window</button>
   <script>
      // creating the variable to store window
      var new_window;
      function openWindow() {
         // open a new window
         new_window = window.open("https://www.tutorialspoint.com/index.htm", "_blank", "width=800");
      }
      function closeWindow() {
         // close the window
         new_window.close();
      }
   </script>
</body>
</html>

So, users learn to open a new tab or window using JavaScript. Also, learned to close the tab or window using the close() method.

Also, we can open new windows to take user input, and when a user submits the form data, we can invoke the close() method in the function where we handle the form data.

Updated on 19-Jan-2023 09:19:02

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements