Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call a function before leaving page with Javascript

Tags:

javascript

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; 
//}
like image 884
PMay 1903 Avatar asked Feb 20 '15 10:02

PMay 1903


People also ask

What is the difference between Onbeforeunload and Onunload?

onbeforeunload Below are my findings on the iPad; Using window. onunload , I am able to get an alert when user navigates to a different page from myPage. html (either by clicking on some link or doing a Google search while on myPage.

What is Beforeunload event in Javascript?

The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point. This event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page.

What is window Onbeforeunload?

The onbeforeunload event occurs when the document is about to be unloaded. This event allows you to display a message in a confirmation dialog box to inform the user whether he/she wants to stay or leave the current page. The default message that appears in the confirmation box, is different in different browsers.


2 Answers

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.'); }); 
like image 127
Jitendra Pancholi Avatar answered Sep 21 '22 19:09

Jitendra Pancholi


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/

like image 22
Moob Avatar answered Sep 18 '22 19:09

Moob