How to call a function before leaving page with Javascript

Question

I would like to execute a function before leaving page without showing a confirmation popup with Javascript only. I've tried with the code below but it didn't work or with the onbeforeunload but it always shows the popup.

var result = 'test';

if(window.onbeforeunload == true)
{
    result = 'test1';
    alertmess();
}

function alertmess() {
    alert(result);
}

//window.onbeforeunload = function() { 
//  return result; 
//}

Answer 1

You can always call your function before leaving the page.

function myfun(){
     // Write your business logic here
     console.log('hello');
}

onbeforeunload:

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

Or with jQuery:

$(window).bind('beforeunload', function(){
  myfun();
  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() {
    myfun();
    alert('Bye.');
}

Or with jQuery:

$(window).unload(function(){
  myfun();
  alert('Bye.');
});

Answer 2

Just call your function from within window.onbeforeunload. Note, some browsers restrict what you can do here (eg: no redirects or alerts). See: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload for more info.

I've also added the appropriate code for readers that do want to show a confirmation dialog.

function doSomething(){
    //do some stuff here. eg:
    document.getElementById("test").innerHTML="Goodbye!";
}
function showADialog(e){
    var confirmationMessage = 'Your message here';
    //some of the older browsers require you to set the return value of the event
    (e || window.event).returnValue = confirmationMessage;     // Gecko and Trident
    return confirmationMessage;                                // Gecko and WebKit
}
window.addEventListener("beforeunload", function (e) {
    //To do something (Remember, redirects or alerts are blocked here by most browsers):
    doSomething();    
    //To show a dialog (uncomment to test):
    //return showADialog(e);  
});

Just hit 'Run' to test: http://jsfiddle.net/2Lv4pa9p/1/

Answer 3

If you want to prompt the user, return a string with the message. If you don't want to prompt the user, don't return anything.

// Execute code, then prompt the user to stay
window.onbeforeunload = function () {
  // This will happen before leaving the page
  return 'Are you sure you want to leave?';
}

Or:

// Execute code, then leave
window.onbeforeunload = function () {
  // This will happen before leaving the page
}

Answer 4

The documentation here encourages listening to the onbeforeunload event and/or adding an event listener on window.

window.addEventListener('onbeforeunload', function(e) {}, false);

You can also just populate the .onunload or .onbeforeunloadproperties of window with a function or a function reference.

Though behaviour is not standardized across browsers, the function may return a value that the browser will display when confirming whether to leave the page.

Answer 5

Please try below simple code -

Jquery Code Example -

$(window).on('beforeunload', function(){
  Func_ToInsert_Record();
  alert('Thanks And Bye!');
});

Javascript Code Example -

// Anonymous function 
window.onbeforeunload = function(event) {
  var message = '';
  if (window.event) {
    console.log(window.event);
    console.log(event.currentTarget.performance);
    console.log(event.currentTarget.performance.navigation);
    console.log(event.currentTarget.performance.navigation.type);
     
  } 
  
  event = event || window.event;
  event.preventDefault = true;
  event.cancelBubble = true;
  event.returnValue = message;
}

Answer 6

What you're doing there is definitely not going to do it. Comparing window.onbeforeunload to true at some arbitrary time doesn't even make sense.

What's with the commented out code at the end? If anything, you need to assign a function to onbeforeunload:

var result = 'test';

window.onbeforeunload = function() {
  result = 'test1';
  alertmess();
}

function alertmess() {
  alert(result);
}

However, the above only appears to work in IE. Please see @Bulk's comment and @Brandon Gano's answer.

Answer 7

This is an example of how you could handle the navigate away. Notice how a div appears a little before the navigation occurs.

window.onbeforeunload = function () 
{
   $("#oi").append($('<div>This is the child DIV</div>'));
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theMainDiv">
  The Main Div will receive another div before leaving the page
</div>

<button onclick="window.location.href='pageAway'">Navigate Away</button>

Answer 8

I simple put this code and works preety well

window.onbeforeunload = function(event) {
    $('element').show();
    return;
};