57

How can I know in Firefox whether the refresh button is clicked or browser back button is clicked? For both events, the onbeforeunload() method is a callback. For Internet Explorer, I am handling like this:

function CallbackFunction(event) {
    if (window.event) {
        if (window.event.clientX < 40 && window.event.clientY < 0) {
            alert("back button is clicked");
        }
        else {
            alert("refresh button is clicked");
        }
    }
    else {
        // I want some condition here, so that I can differentiate between
        // whether refresh button is clicked or back button is clicked.
    }
}

<body onbeforeunload="CallbackFunction();">

But in Firefox event.clientX and event.clientY are always 0. Is there another way to find it?

8
  • 2
    You can use the history API and handle the entire process of navigation pretty much yourself. See developer.mozilla.org/en-US/docs/Web/Guide/DOM/… Aug 27, 2013 at 5:43
  • 3
    Note that refreshing can also be done using F5, CTRL+R, and navigation can be done as well using the keyboard, and it is different in various browsers and operating systems.
    – Uooo
    Aug 27, 2013 at 5:52
  • 2
    BTW, do you want to do this cross-browser or in firefox only? Your title says firefox, but the tags say cross-browser.
    – Uooo
    Aug 27, 2013 at 5:53
  • Just check if there are values in the cache. If there was a back button then some saved values will still be there, and if the refresh button was clicked then everything will be the default. This is easily done in PHP but can probably be accomplished in Javascript too if you just check for set variables. Aug 27, 2013 at 6:20
  • 4
    Rule of Thumb: Whenever you feel the “need” to differentiate between a refresh or a back/forward navigation, you are most likely doing something wrong already. So I’d suggest you describe the actual problem that you want to solve by this, rather then keeping on riding this already dead (or rather already stillborn) horse.
    – CBroe
    Aug 29, 2013 at 12:25

4 Answers 4

59
+25

Use for the on refresh event:

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

See Window: beforeunload event.

And

$(window).unload(function() {
    alert('Handler for .unload() called.');
});
7
  • 41
    How does this differentiate between reloads and back buttons? May 7, 2015 at 19:01
  • 1
    It doesn't. Also note that iOS deliberately does not support beforeunload events. Nov 10, 2015 at 23:37
  • 1
    jQuery.unload() has been removed. See stackoverflow.com/questions/23445332/… instead
    – mojoaxel
    Mar 27, 2017 at 8:40
  • 5
    Doesn't answer question :-\
    – webdevinci
    May 16, 2017 at 13:52
  • 1
    $(window).unload(function() { alert('Handler for .unload() called.'); }); not work :|
    – R.Akhlaghi
    Dec 12, 2019 at 11:56
15

Use 'event.currentTarget.performance.navigation.type' to determine the type of navigation.

This is working in Internet Explorer, Firefox and Chrome.

function CallbackFunction(event) {
    if(window.event) {
        if (window.event.clientX < 40 && window.event.clientY < 0) {
            alert("back button is clicked");
        }
        else {
            alert("refresh button is clicked");
        }
    }
    else {
        if (event.currentTarget.performance.navigation.type == 2) {
            alert("back button is clicked");
        }
        if (event.currentTarget.performance.navigation.type == 1) {
            alert("refresh button is clicked");
        }
    }
}
8
7

For the back button:

In jQuery:

// http://code.jquery.com/jquery-latest.js

jQuery(window).bind("unload", function() { //

and in HTML5 there is an event.

The event is called 'popstate':

window.onpopstate = function(event) {
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

And for refresh, please check Check if page gets reloaded or refreshed in JavaScript.

In Mozilla, Client-x and client-y are inside the document area. See MouseEvent.clientX.

2
  • Is same thing works on html4
    – Android
    Aug 30, 2013 at 10:13
  • popstate event is defined in html5. so it will work only with html5 compatible browser. Aug 30, 2013 at 11:07
-7
var keyCode = evt.keyCode;
if (keyCode == 8)
    alert('you pressed backspace');

if(keyCode == 116)
    alert('you pressed F5 to reload the page')
6
  • 4
    what if some user uses his mouse instead of keys?
    – Joshua
    Sep 5, 2013 at 9:51
  • i didn't give the full solution, i just presented an idea to help, in the end programmer should work his way out Sep 5, 2013 at 11:53
  • and also for navigation through the mouse, there is whole tutorial on Mozilla developers site, on example is window.back which is a javascript function to point browser for the previous page Sep 5, 2013 at 11:57
  • 2
    Why in the world was this downvoted!!!??? Its not a bad solution as it gets you most of the way there, even if keycodes vary between certain platforms. This is actually closer to a solution than beforeunload as beforeunload is going to fire anytime a page is unloaded and not necessarily on a refresh -- potentially ever. This at least targets a refresh, alone. But I'm tempted to downvote for using == instead of === ;-P
    – Cody
    Jan 30, 2019 at 19:11
  • 1
    It's probably downvoted because this code is not actually intercepting the back button or refresh button being pressed on the browser but instead the F5 key and backspace key on the keyboards. From my research so far, there is no possible way to intercept the browser back or refresh buttons and probably for good reason, this is a good way to piss people off real quickly.
    – dmikester1
    Jun 1, 2020 at 16:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.