31

I have a query regarding my application. Whenever user closes browser window accidentally I'd want to do some clean up operations before that. I have used onunload event but problem is this event is sometimes is firing and sometimes doesn't. What should I do, is there better way to handle such type of problem.

Jonik
  • 80,077
  • 70
  • 264
  • 372
pradeep
  • 1,047
  • 3
  • 20
  • 24
  • NB: what seems like a closely related question by the same user: http://stackoverflow.com/questions/1254869/javascript-onunload-event – Jonik Aug 13 '09 at 07:11
  • Also http://stackoverflow.com/questions/1244535/alert-when-browser-window-closed-accidentally, etc. – Jonik Aug 13 '09 at 07:15
  • 1
    None of the answers in this topic is working with the new browsers policy. chrome and firefox completely disable the onbeforeunload capability of preventing the form to close. and you cant even change the default message. in IE and edge you can just change the default message but cannot prevent page reload. – M.R.Safari Jan 20 '18 at 09:10

6 Answers6

37
window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

See the MSDN article on onbeforeunload

Also there is a similar question in SO

Community
  • 1
  • 1
rahul
  • 184,426
  • 49
  • 232
  • 263
  • I tried to use onbefore unload event giving user an alert,but now the problem is i m getting two alerts one which i gave and other alert is given by browser.I just want my alert to fire.can u tell me how to get rid of this. – pradeep Aug 13 '09 at 06:59
  • 1
    The link to the SO question might be helpful. – rahul Aug 13 '09 at 07:02
  • probably, stop the propagation of the event into your event handler or preventDefault(); – realtebo May 28 '13 at 11:47
7

Try:

window.onbeforeunload = function() { ...your code... }
Craig Walker
  • 49,871
  • 54
  • 152
  • 212
Davide Ungari
  • 1,920
  • 1
  • 13
  • 24
  • I tried to use onbefore unload event giving user an alert,but now the problem is i m getting two alerts one which i gave and other alert is given by browser.I just want my alert to fire.can u tell me how to get rid of this. – pradeep Aug 13 '09 at 07:00
  • mozila?hw to get rid?i want this event to work in all browsers. – pradeep Aug 13 '09 at 07:10
  • 3
    I think it is all right, if before there is your alert then the browser alert. It's a matter of security you can not override browser business logic. – Davide Ungari Aug 13 '09 at 07:16
  • Not tried, but make sure your function doesn't return anything at all. – Tilendor Sep 23 '09 at 22:51
4

From my experience onunload works differently in different browsers. Why dont you use another event handler called onbeforeunload instead. It should work. Onbeforeunload will execute first before the window closes, so that should solve your problem.

Prasanna Raghu
  • 2,593
  • 3
  • 22
  • 25
4

This works:

window.onbeforeunload = function(){
    console.log('closing shared worker port...');
    return 'Take care now, bye-bye then.';
  };

This is handy if, for instance you're working with SharedWorkers and you need to tell the worker that there is one less port to manage -- otherwise, you could end up refreshing one browser tab and get something like a "Successfully connected with: 10 other tabs" because the one tab is keeping the worker alive while the other tab's refreshes keep pushing new port connections to you array.

Hope this helps.

Cody
  • 9,785
  • 4
  • 61
  • 46
2

This is not allowed because of security reasons. onbeforeunload is an browser API that have different behaviors on different Browsers.

kaiserkiwi
  • 516
  • 1
  • 5
  • 17
1

this is one of my answer that gives u the onbeforeunload only if the user want to close the window and also to hijack the browser message for some extent.....

<html>
<head>
<script src='http://code.jquery.com/jquery-1.6.2.min.js'></script> <!--this is get jquery header file its not required but i have used jquery for minor correction-->
<script type="text/javascript" src="http://fbug.googlecode.com/svn/lite/branches/firebug1.4/content/firebug-lite-dev.js"></script><!--this will give a firebug to check the console in IE-->
<script language='javascript'>
window.onbeforeunload = function(evt){
  var message = "";
  var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;  //validating the browser where its chrome or not
  if(is_chrome){
    message = "Do you want to close the browser or not?";
  }
  if(this.flag == 1 || $('#help').css('background-color') == 'red'){
    console.log("red");
    return message;
  } else { console.log("blue"); return NULL;}
}
function change(){
  $('#help').css('background-color','red');
  this.flag = 1;
}
</script>

</head>
<body> 
  <a id='help' onclick=change() title="please click on Links">Links</a> 
</body>
</html>

i think it might be useful for any body thanks.....

Raghu
  • 31
  • 1