Preventing window close with JavaScript

Closing a browser window with JavaScript is easy, you just call window.close(); however catching the browser close event and preventing it is another kettle of fish. I’ve been working on this a bit on-and-off, and have managed to pull together what I think is a reasonable solution [NOTE: this does not work in Opera, as it uses the onunload() and onbeforeunload() events, which are not supported by Opera 11].

The solution I have come up with is pretty simple once you see it. I put the following code either in my JavaScript library included into the page, or I just place it at the top of the required page (in tags, of course):

function checkClose() {
    if (ok) {
        return "Have you saved your information?";
    }
}

var ok = true; // this is reset everytime a new page is loaded

function okToLeave() { // called if leaving the page is needed
    ok = false;
}

window.onbeforeunload = checkClose;
window.onunload = checkClose;

and in my links where I’m happy to leave the page without checking (i.e. on submitting a form):

I have also allowed for a cancel event, where I don’t want the checkClose() event called, but I still want to catch the close/departure:

What we have going on here is a standard JS being called whenever there is a page unloaded. This can be due to clicking a link, entering a new URL in the browser, or closing the window or tab. The JS call will be to checkClose(). If checking before exit is required, then the pop-up is activated. If the page-exiting event is not a problem, then the JS inserted within this event (onclick="okToLeave();") sets the checking variable (ok), which then causes the checkClose() function to do nothing, so the onunload events are not thwarted. In some circumstances (i.e. the Cancel button being clicked) we don’t want the onunload event called, but we do want to confirm departure; in these cases the extra JS inserted in the event (onclick="okToLeave(); return confirm('Confirm leaving this page.');") warns and confirms with the client user.

This approach is only necessary if you are trying to check for events not triggered within your own page (e.g. the window closing event), otherwise it is just overkill. If you only want to confirm when certain links are used, then insert the check within their use, i.e.:

<a href="otherpage.html" onclick="confirm('Do you really 
             want to leave this page?')" >this is a link</a>

I did like this comment I found on a forum regarding this concept though:

The question is not how but why??
If a user wants to close his browser, that’s his god-given right!

If you don’t want him to close it, make it so there’s something interesting in the window. (Naked women seem to do the trick for a lot of people)

Advertisements

About Cameron
I'm a final year Computer Science/Information Systems major. Already finished my BA in Politics/Philosophy. I do web and software freelance on the side, while I finish studying. Hoping to be self-employed by the end of my degree, otherwise off into the real-world I go....

One Response to Preventing window close with JavaScript

  1. Pingback: Tweets that mention Preventing window close with JavaScript « whileloop -- Topsy.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: