CODEWITHSUNDEEP
javascriptdom-events
gopi1410
gopi1410

Reputation: 6625

Browser/tab close detection using Javascript (or any other language)

I searched for this question in various places, but all that they mention is the use of Javascript window.unload and window.onbeforeunload. Also it doesn't work in Chrome most of the times as it gets blocked.

Then how does google manage to do it. If we are composing a mail and by mistake close the tab, google prompts us by a "Are you sure?" box.

Can somebody help me out?

What actually I want to do is to ask confirmation of the user, when he is filling in the form and by mistake clicks on tab close. If yes, I allow him to navigate away else he stays on the page & continues to fill his form.

Upvotes: 2

Views: 16301

Answers (3)

Joel Purra
Joel Purra

Reputation: 25117

If you only want to ask a user if they want to leave the page when they've changed anything in the forms on the page, have a look at PageHasFormChanges. Keep in mind that I developed it for use it on very simple pages, with only one or two forms.

PageHasFormChanges: A jQuery plugin to check if anything has changed in any form on a page, and warn the user before leaving the page.

You don't need to do anything, but load the script on your page. You can change the defaults though:

JoelPurra.PageHasFormChanges.setOptions({
    leavingPageWarningMessage: "Are you sure?"
});

If you're using ajax to submit your forms, you could consider setting resetWarningOnPreventedSubmit to true.

Upvotes: 2

Peter Aron Zentai
Peter Aron Zentai

Reputation: 11740

I tested and the example posted on MDN works clearly in Chrome.

<script>
    window.onbeforeunload = function (e) {
        e = e || window.event;

        // For IE and Firefox prior to version 4
        if (e) {
            e.returnValue = 'Any string';
        }

        // For Safari
        return 'Any string';
    };

    function formSubmit() {
      window.onbeforeunload = null; 
   }
</script>

...

   <form onsubmit="formSubmit()">...</form>

This way a dialog opens that will not be blocked by a popup blocker as it is originated from a user click.

Upvotes: 7

Sujit Agarwal
Sujit Agarwal

Reputation: 12508

you can use the jquery unload function:

$(window).unload(function() {
  alert('Handler for .unload() called.');
});

Upvotes: 1

Related Questions