0

Basically what i am trying to do was, whenever a user tries to close the current tab(when he was on my site), i want to display a pop up with three choices about why he was leaving and want to store that choice some where

So i have written the following in main.js which will be loaded through entire site pages

$(document).ready(function() {
  // Before closing the current tab, ask user for a reason
    $(window).on('beforeunload', function(event){
      $('#load_choices_up').click();
      event.stopPropagation();
      event.preventDefault();
      debugger;
    });
});

So i have three issues with the above jquery code

*.This code was executing even when i click another link on the same page(I mean if i navigate to another page from current page), but i only want this code to run when the current tab/page was closed(about to close) completely, but not when navigating to another page on my site

*. After this line $('#load_choices_up').click() was executed, a choices pop up was opening as expected, but immediately the default processing of browser(that is closing functionality) was not being stopped with two lines event.stopPropagation(); and event.preventDefault();, i mean these two methods of stopping the behaviour is not working and the browser is closed, but i want to do some processing based on user choices input and then based on that i will close tab.

*. When i used return "Why do you want to leave the page", instead of choices pop up, the browser was displaying different message based on browser type like "You have unsaved changes" in chrome, and some different message in firefox, instead of displaying my custom message

So finally, why event.stopPropagation(); and event.preventDefault(); are not working ? and why i can't able to display my custom message ?

Shiva Krishna Bavandla
  • 25,548
  • 75
  • 193
  • 313
  • 1
    The ability to customize the message has recently been removed by most major browsers. https://www.chromestatus.com/feature/5349061406228480 http://stackoverflow.com/questions/5398772/firefox-4-onbeforeunload-custom-message – Jason P Sep 07 '16 at 12:52
  • Possible duplicate of [Is it possible to display a custom message in the beforeunload popup?](http://stackoverflow.com/questions/38879742/is-it-possible-to-display-a-custom-message-in-the-beforeunload-popup) – Dekel Sep 07 '16 at 14:33
  • @shivakrishna, I marked as dup because of your question regarding the customize message in the confirmation box. You can check my answer there regarding whats possible and what isn't. – Dekel Sep 07 '16 at 15:06

1 Answers1

1

You can't prevent someone from closing the browser. This is for obvious security reasons. Imagine a spam-website preventing you from closing the website while pumping you full of god knows what.

You can at most pull one function like an alert() or a prompt. After a user closes them, the tab will close either way.

beforeUnload is also extremely short-timed. You won't be able to run massive scripts with it, as the user would probably close the tap before any script would run properly. (I tried it with an ajax call, didn't work)

So, even if you're able to get the options you want in there, the moment a user chooses one of the options, you're not going to be able to save it anywhere. Your script will never make it that far.

You can customize the "are you sure?" message like so:

$(document).ready(function() {
    window.onbeforeunload = function(e) {
       return 'Dialog text here.';
    };
});

but again, you can only change the text. It's a browser's native functionality, and you cannot change it.

NoobishPro
  • 2,539
  • 1
  • 12
  • 23
  • 1
    Babydead : Even i can't able to customize the message – Shiva Krishna Bavandla Sep 07 '16 at 12:48
  • I have pasted this code in my js file, on Chrome - the message when about to close was `Do you want to leave this site? Changes you made may not be saved.` and on firefox `This page is asking you to confirm that you want to leave - data you have entered may not be saved.` – Shiva Krishna Bavandla Sep 07 '16 at 12:50
  • That's because you're using a jQuery `on()` event. You need to use plain javascript for this (which changes a local variable) `window.onbeforeunload`. -- note that this function should **not** be within your `$(window).on("beforeUnload")`. It's like setting a variable. I have updated my answer for clarity. – NoobishPro Sep 07 '16 at 12:51
  • 2
    The ability to customize the message has recently been removed.. see my comment on the question above. – Jason P Sep 07 '16 at 12:53
  • Oh wow, I never knew. Thanks! But then I guess my old answer was correct; you can't. – NoobishPro Sep 07 '16 at 13:16