5

enter image description here

I need to call a Javascript function when user closing the browser tab. The problem is I want to happen this only when user closing the browser. No need to happen for page refresh, link navigation,form submit and back button press. I have tried the below JQuery code so far.

$(window).bind(
 "beforeunload", 
 function() { 
   alert("don't close me");
   return false;
 }
)
 $('form').submit(function() {
   jQuery(window).unbind("beforeunload");
 });

It's not working. Is there any other Javascript tools than JQuery available for this?

And if I call my function "beforeunload" event, above message is coming. I don't want to show this message and my function has to be worked. I tried by giving e.preventDefault. But it's not calling my function again. Can anybody suggest something.

Thanks.

Hamid Reza
  • 2,913
  • 9
  • 49
  • 76
isc
  • 526
  • 1
  • 5
  • 17
  • What would you need that for? It cannot be done reliably anyway. – Bergi Jul 31 '13 at 15:53
  • 4
    Oy... please take a moment to consider how terrible this is for user experience... – Lix Jul 31 '13 at 15:53
  • I hate those who add annoying alerts to beforeunload. Seriously, it can very rarely be seen on any legit sites. – MightyPork Jul 31 '13 at 15:54
  • 1
    *Clicks X to leave web-page*, "Press OK to **stay** on page", this gets me every time...also, please don't make something like this :D – tymeJV Jul 31 '13 at 15:55
  • 2
    Did you look at: http://stackoverflow.com/questions/2858057/javascript-function-on-web-page-close – tuckermi Jul 31 '13 at 15:57
  • @tuckermi ::Thanks..but the answer is working when refreshing the page also.i want only this event work only on tab close. that's the issue – isc Jul 31 '13 at 17:00

4 Answers4

7

I agree with the comments that this is a bad practice, but I can't resist the call to attempt answering the question.

The only way I can think of to accomplish this is to use onbeforeunload, which you're already doing. But you need a way of disabling that alert when someone navigates away from the page by some other means.

var show_close_alert = true;

$("a").bind("mouseup", function() {
    show_close_alert = false;
});

$("form").bind("submit", function() {
    show_close_alert = false;
});

$(window).bind("beforeunload", function() {
    if (show_close_alert) {
        return "Killing me won't bring her back...";
    }
});

It's not foolproof, as in there are ways to close the browser without seeing the alert (like clicking a link, hitting Stop immediately, and then closing the browser), but it may be as close as you can get.

Here's a fiddle.

But please... don't do this.

mwcz
  • 8,949
  • 10
  • 42
  • 63
  • thanks..its avoiding alert for navigation and form submit. but its happening for page refresh. – isc Jul 31 '13 at 17:08
  • You can add event handlers for all the "refresh" keypresses: `F5`, `Ctrl+F5`, `Ctrl+r`, `Cmd+r`, `Ctrl+shift+r`, and `Cmd+shift+r` which all set `show_close_alert` to `false`. But there is no way to catch them all because users could have remapped the keys, or could simply click the Refresh icon. There is no way to do what you want with 100% success. The lesson to learn from that fact is that you should Not Do This. :) – mwcz Jul 31 '13 at 17:50
  • 1
    :: Thanks..i understood that..but what to do. someone is very much intrested to irritate the user. :) – isc Aug 01 '13 at 05:33
  • @SIC with what I suggested above you can probably get this to work for 99% of users. Those with remapped keys or those who manually click refresh are out of reach, though, to the best of my knowledge. – mwcz Aug 01 '13 at 15:09
  • Its working as you suggested. but its showing the browser's default alert "Are you Sure" with some content and two buttons "stay"or "leav" on onbeforeunload event. can you suggest any methods to avoid this. – isc Aug 05 '13 at 10:18
  • @SIC you need to add event listeners for those button clicks, similar to the ones above for `a` tag clicks and form submits. – mwcz Aug 05 '13 at 21:12
  • i have updated the question. can you please look into that once. – isc Aug 13 '13 at 13:02
  • @SIC The question has been answered reasonably well, and this is turning into a discussion (which is against SO policy). Feel free to ask a new, more specific question if you are still having trouble. – mwcz Aug 26 '13 at 15:18
1

onunload (or onbeforeunload) cannot redirect the user to another page. This is for security reasons.

If you want to show a prompt before the user leaves the page, use onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Or with jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

This will just ask the user if they want to leave the page or not, you cannot redirect them if they select to stay on the page. If they select to leave, the browser will go where they told it to go.

You can use onunload to do stuff before the page is unloaded, but you cannot redirect from there (Chrome 14+ blocks alerts inside onunload):

window.onunload = function() {
    alert('Bye.');
}

Or with jQuery:

$(window).unload(function(){
  alert('Bye.');
});
Jitendra Pancholi
  • 7,897
  • 12
  • 51
  • 84
0

JSFiddle uses the following to alert the user they are trying to close their modified fiddle without saving:

window.onbeforeunload = function(){
  if (window.editorsModified){
    return "You've modified your fiddle, reloading the page will reset all changes."
  }
};

This works reliably (http://jsfiddle.net/MaxPRafferty/b6uEF/show/ ,Latest Chrome, FF, IE10 ), but will always prompt the user. You can't force the page open by returning false;

MaxPRafferty
  • 4,819
  • 4
  • 32
  • 39
0

The answer to your question would be to NOT add the image on the SERVER SIDE. The image will be parked on the server and slow it which is not a good practice, I understand you want to re-render the image, there is a faster way to do that by using the file that you have uploaded.

Here is a medium article: https://medium.com/@650egor/react-30-day-challenge-day-2-image-upload-preview-2d534f8eaaa

It will show the preview of any uploaded image so that user can see how the image looks, once the user is satisfied and actually wants to save it, he can click on submit button which will then run the {handleSubmit} function.

Steps:

  1. Make a {handleChange} function to the input field
  2. Show the preview by following the medium article
  3. Make a {handleSubmit} function to submit the data on the servers
  4. Re-render ✌
Rohan Punjani
  • 1
  • 1