Ask for confirm when closing a tab [closed]

Question

When I close my page on some browser I want a message box to appear and to ask me if I really want to close the page or not, with two buttons and if I click No then this tab won't be closed.

How can I do that?

Portrait

possible duplicate of Call some JavaScript when the user closes a (popup) window – Amperehour

possible duplicate of javascript to check when the browser window is close – Onida

Answer 1

You need to listen on the beforeunload event.

Here's a kickoff example:

window.onbeforeunload = function() {
    return "Hey, you're leaving the site. Bye!";
};

This message will show up in kind of a confirmation dialogue. This message will show up right before the client unloads the page. That can be a browser close, but that can also be a simple navigational action like clicking a link or submitting a form in the page!

You would most probably also like to turn it off (just set to null) whenever an internal link is clicked or an internal form is submitted. You namely don't want to annoy endusers with unintuitive behaviour. You can do that by listening on the click event of the desired links and the submit event of the desired forms. jQuery may be of great help here since it does that in crossbrowsercompatible way so that you don't need to write >20 lines of JS code for this:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    window.onbeforeunload = function() {
        return "You're leaving the site.";
    };
    $(document).ready(function() {
        $('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
        $('form').submit(function() { window.onbeforeunload = null; });
    });
</script>

You only need to give all external links the defacto standard attribute rel="ext" to denote that those are external links.

<a href="http://google.com" rel="ext">Google</a>

Redivivus

You don't have to detach the onbeforeunload function if you don't want to display the alert box. Just let the function return nothing and the browser will go on as expected (closing the window, going back in history, etc.). – Writ

@Marcel: That's indeed another way of disabling the function. That however require a global and I'd like to avoid them as much as possible. – Redivivus

If adding the attribute rel="ext" is not doable, you could also compare the href location of the link to your current page. $('a[href*="'+window.location.host+'"]') – Basipetal

Updating comment with better solution. The following selects all links that are not of the following: relative, on the same domain, and not a symbol (#). $('a:not([href^="/"],[href*="'+window.location.host+'"], [href^="#"])') – Basipetal

beforeunload is no longer supported in ios. any other solution? – Barracoon

beforeunload is no longer supported in ios. any other solution? – Barracoon

Answer 2

use the onbeforeunload event

window.onbeforeunload = function(){
    return "Are you sure you want to close the window?";
}

This will display a messagebox where the user can choose whether or not to close the window.

Note that this is not supported by Opera.

Keratin

Answer 3

onbeforeunload fires before onunload.

You can't cancel the event in onunload. onbeforeunload allows returning a string from events (e.g. window.onbeforeunload = function() {return "really leave now?"}, and the browser will ask the user a question whether they want to leave your page. The page has no say in stopping the event if "Yes" is clicked (that's the way it should be too in my opinion.)

General points:

• alert, prompt and confirm aren't allowed in either events.
• Neither is supported in Opera.

WARNING: In IE6/7 at least (and possibly IE8 but not FF/Chrome etc) onbeforeunload and onunload are triggered when anchors/javascript links are clicked on. Some examples:

• <a href="#myanchor">trigger unload!</a>
• <a href="javascript: alert('message!')">trigger unload!</a>

(MSDN is as good a source as any, considering it's non-standard and that Firefox/Chrome/Safari seems to largely have copied the implementation from IE.)

Saintsimonianism