How to close the current tab by clicking a button inside HTML?

Question

I'm trying to close the current tab of the browser by clicking a button inside my HTML page, Since the user should not go back to the previous link, I'm trying to force the user to initiate it again... Is there any way to do so ?

    <div class="form-group col-lg-12 pad0 mt10">
       <div class="a-center">
           <input id="cLReq" class="btn btn-danger" ng-click="window.close()" type="button" value="Close the Window"></input>
       </div>
    </div>

Share the code you have please it will help you get an answer — GillesC, Apr 05 '16 at 11:15
Try window.close() https://developer.mozilla.org/es/docs/Web/API/Window/close — ojovirtual, Apr 05 '16 at 11:15
You can only close tabs (or windows) with script if you opened them with script. — Reinstate Monica Cellio, Apr 05 '16 at 11:16
Did you programatically open the tab/window in the first place? — James Thorpe, Apr 05 '16 at 11:16
User will have other options to open that link.. This is not a good approach.. — Rayon, Apr 05 '16 at 11:17
Sounds like an XY Problem - why do you not want the user to go back? Solve that problem instead. — Reinstate Monica Cellio, Apr 05 '16 at 11:18
@T.J.Crowder, In chrome `49`, `ctrl + t` -> `console` -> `window.close();` works.. — Rayon, Apr 05 '16 at 11:26
@RayonDabre: The console is special in several ways, and my statement above was incomplete. I'll update the answer. — T.J. Crowder, Apr 05 '16 at 11:32
As ever, [the specs reveal all](https://html.spec.whatwg.org/multipage/browsers.html#script-closable). ctrl+t, navigate a couple of pages, console `window.close()` no longer works. — James Thorpe, Apr 05 '16 at 11:36
@T.J.Crowder, Why did you delete it ? Or something more is coming ? — Rayon, Apr 05 '16 at 11:54
@RayonDabre: Because it was outdated, I'd forgotten about the other caveats in the HTML5 spec. :-) Fixed it now: http://stackoverflow.com/a/36424949/157247 — T.J. Crowder, Apr 05 '16 at 11:56
@Archer, bcoz the client's requirement is like that, it can be done by clearing the history i.e (disabling the back button)... but, the client requires to close it immediately... — Ajai Krishnan R, Apr 05 '16 at 12:58
You need to accept that you cannot close the tab and find a better way to approach your problem. For example, if you simply want to force the user to move through the site in a specific way then do that - use ajax to load pages, rather than use links and traditional page transitions. — Reinstate Monica Cellio, Apr 05 '16 at 13:08

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

You can use window.close() to close the window, if your script is allowed to close the window. Browsers will let your code close the window (tab) only in some situations:

The close() method on Window objects should, if all the following conditions are met, close the browsing context A:

The corresponding browsing context A is script-closable.

The responsible browsing context specified by the incumbent settings object is familiar with the browsing context A.

The responsible browsing context specified by the incumbent settings object is allowed to navigate the browsing context A.

A browsing context is script-closable if it is an auxiliary browsing context that was created by a script (as opposed to by an action of the user), or if it is a browsing context whose session history contains only one Document.

Here's an example:

HTML:

<input type="button" id="btn-immediate" value="Close Immediately">
<input type="button" id="btn-delay" value="Close After Delay">
<div>Auto close in: <span id="countdown"></span></div>

JavaScript:

document.getElementById("btn-immediate").addEventListener("click", function() {
    // Close in direct response to a user action
    console.log("Calling window.close");
    window.close();
    console.log("Done calling window.close");
}, false);

document.getElementById("btn-delay").addEventListener("click", function() {
    // Close in an INdirect response to a user action
    console.log("Scheduling timed callback");
    setTimeout(function() {
        console.log("Calling window.close");
        window.close();
        console.log("Done calling window.close");
    }, 0);
}, false);

// Auto close after 15 seconds
var counter = 15;
tick();
function tick() {
    if (--counter == 0) {
        window.close();
        document.getElementById("countdown").innerHTML = "If the page is still here, auto-close failed";
    } else {
        document.getElementById("countdown").innerHTML = counter;
        setTimeout(tick, 1000);
    }
}

If you right-click and open this page in a new tab, then follow the link in that page to take you to the page with the code above on, you'll find that at least one and probably all three of the window.close() calls above will fail (depending on the browser), because the browsing context's history isn't empty. But if you right-click and open that same page directly, since the browsing context has no history, most if not all of them will work.

Browser vendors are constantly trying to make it possible for script code to do as much as possible, while still ensuring that the user is in charge of their browser. For a while, you could only call window.close() in direct response to a user action, but that was too restrictive. The HTML5 spec is the largely-consensus outcome of years of experimentation by individual vendors trying to get this right.

How to close the current tab by clicking a button inside HTML?

1 Answers1