I was asked by a visitor how he could close a browser window or tab using JavaScript. This article addresses that question.
Since this was written in response to a JavaScript question, it assumes that you at least know how to insert JavaScript code into a web page.
To close a window or tab that was opened using JavaScript, call window.close(). For example,
the following will close the current window/tab.
Note that window.close() will only work under the following conditions:
On all modern browsers, the web page to be closed must be the first in that window/tab's session history. That is, if you hit the Back button on the browser, you will not go to a previous page in that window/tab because there is none.
You can easily accomplish that by opening that page either with JavaScript, for example, by using
window.open(), or through a link that has a target="_blank" attribute.
You can find example code for the former in the demo below, and the latter in the article on
opening
links in a new window or tab.
If you only test your code in an old browser (eg, old versions of Chrome or Firefox, or any version of Internet Explorer), you will end up with the mistaken impression that it works fine even if the above conditions are not true. Newer browser versions impose these restrictions for security (and other) reasons.
Modern browsers will also resist your attempt to trick them into thinking that an existing window/tab was opened with JavaScript when it was not. Some older versions fell for such trickery, but these methods should no longer work in the current versions of Chrome and Firefox.
Before you click the demo buttons below, please note the following:
The "Open demo" button will open a window/tab containing this very article, although the browser should automatically scroll to start of the demo section, since I linked directly to it. (See How to Link to a Specific Line or Paragraph on a Web Page Using HTML, if you want to do this.)
Although the "Close current window" button appears in both the original window/tab and the newly-opened demo, it may only work in the latter, depending on how you reached this article. If you are reading this in a modern browser, try it. That is, click the button in both the demo window (which should close) and this one (which may or may not).
Having said that, you may not want to click the "Close current window" button on the original window in case you actually succeed, since you will then have to reload the page to continue reading.
Once again, be warned that the window that pops up is identical to the one you are reading (since it's the same URL), with no visual cue to distinguish between the original and the demo. As such, if you don't look at the list of tabs/windows in your browser after clicking, you may not realize that you are already looking at the demo. If you repeatedly click the "Open demo" button, thinking that nothing has happened, you will end up with multiple windows/tabs containing this article.
That said, the "Close current window" button should work on all the tabs/windows except possibly the original one. And, of course, the usual way you close a tab in your browser will also work.
The HTML code for the buttons is as follows:
It is just the
standard
HTML code for buttons, with the addition of onclick handlers that are invoked when someone
clicks them.
The JavaScript for tsw_open_demo_window(), which is called when the "Open demo" button is clicked,
is:
I used a relative URL here, since I'm just opening this same page, but you can use an absolute one (ie, a complete address, including the "http://" or "https://" portion) if you wish.
Since the "Close current window" button does nothing but call window.close(), I placed the JavaScript
directly in its onclick attribute.
Copyright © 2019-2021 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Close a Browser Tab/Window with JavaScript
