5

I want to do some stuff when user is leaving a page, I add this code 

window.onbeforunload = function (e){
   return "You save some unsaved data, Do you want to leave?";
}

This prompt can notify the user and user can stay on the page or leave. But I want more to know whether he leaves or not, and do thing on his decision. I tried this,

window.onbeforunload = function (e){
   var event = jQuery.Event(e);
   var result = confirm('want to leave?');
   if (result ==  false){
     //do sth.. 
     event.preventDefault();
   }else{
    //do clean up
   }
}

But it fails!! It always goes away!

Can any body help me doing this?

Zer001
  • 619
  • 2
  • 8
  • 18
  • 1
    possible duplicate of http://stackoverflow.com/questions/1299452/how-do-i-stop-a-page-from-unloading-navigating-away-in-js btw your acceptrate is unacceptable! – Gergely Fehérvári Mar 10 '11 at 11:59
  • @omnosis it may be similar, but I want to pin point when user decides to leave but change the decision. – Zer001 Mar 10 '11 at 12:36

3 Answers3

7

The method you use (preventing bubbling of the event) is intentionally not possible, otherwise you could prevent users from leaving your page.

You can achieve something similar to what you want by doing your cleanup onunload, and do the stuff you always want to do onbeforeunload.

Erik Bakker
  • 4,579
  • 1
  • 17
  • 8
5

But I want more to know whether he leaves or not, and do thing on his decision

If you wanna do something when he leaves, you can do it in unload event. For example, as @Erik Bakker mentioned you can send async events in unload event.

However if you wanna find out if user "stayed", in other words cancelled the leaving process, there is a way as well. It's kinda hackish, but it works.

const doSomethingWhenUserStays = function doSomethingWhenUserStays() {
  alert('user stayed!!!');
}


window.addEventListener('beforeunload', function onBeforeUnload(e) {
  setTimeout(doSomethingWhenUserStays, 500);
  
  // Dialog text doesn't really work in Chrome.
  const dialogText = 'A dialog text when leaving the page';
  e.returnValue = dialogText;
  return dialogText;
});

Method doSomethingWhenUserStays will be called every time, but if user leaves the page, he won't see what it performed anyway. It can perform asynchronous stuff, synchronous, it doesn't really matter because it's within setTimeout therefore it's out of the normal flow of onBeforeUnload and won't interfere with it.

If you want to perform it ONLY if user really stays on the page it's slightly harder. You'd have to set a global flag that checks whether user reached unload or not and only then call what's inside doSomethingWhenUserStays. Consider the following example.

let hasUserLeft = false;

const doSomethingWhenUserStays = function doSomethingWhenUserStays() {
  // Perform the following only if user hasn't left the page
  if (!hasUserLeft) {
    alert('user stayed!!!');
  }
}


window.addEventListener('beforeunload', function onBeforeUnload(e) {
  // It won't perform doSomethingWhenUserStays in 500ms right after this is called,
  // but instead, it will perform it in 500ms after you click "Stay" or "Leave".
  // Therefore, there should be some time for `unload` handler to fire and
  // set `hasUserLeft` flag before `doSomethingWhenUserStays` is called.
  setTimeout(doSomethingWhenUserStays, 500);
  
  // Dialog text doesn't really work in Chrome.
  const dialogText = 'A dialog text when leaving the page';
  e.returnValue = dialogText;
  return dialogText;
});


window.addEventListener('unload', function onUnload() {
  hasUserLeft = true;
});
emil.c
  • 1,987
  • 2
  • 26
  • 46
  • this doesn't seem to work for me in firefox, possibly because the timer seems to actually go in the background, it doesn't wait for them to click cancel. – stackers Mar 31 '20 at 00:10
  • That's a good point. In such case it's maybe worth to try setInterval which should trigger all the time and when user stays at the page, you just call clearInterval. – emil.c Apr 01 '20 at 06:19
3

As far as I have read about this method in different browser forums like MSDN, MozillaDev, etc, this method does not have any callbacks for OK/Cancel. You have this for the confirm dialog but not for this.

This is a security implementation to allow users to have full right about which website they should see. Also, it averts hackers from locking users to their sites.

saarthak
  • 1,004
  • 2
  • 12
  • 26