How can I know whether refresh button or browser back button is clicked in Firefox?

Question

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?

You can use the history API and handle the entire process of navigation pretty much yourself. See https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history — Benjamin Gruenbaum, Aug 27 '13 at 05:43
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 '13 at 05:52
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 '13 at 05: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. — harmonickey, Aug 27 '13 at 06:20
Apart from what @Uooo already said: Checking the click coordinates is a very fragile way to do this. It might work in _your_ IE, but older versions or instances that are “themed” in some way (OS- or browser theme) might have these buttons in different positions … — CBroe, Aug 29 '13 at 12:23
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 '13 at 12:25
save State as FIFO in cookie and inspect BrowseHistory in cookie. top of stack is refresh, if not, its a "back" action. Make any sense? edit: already mentioned, sorry didnt read comments. — dklt, Sep 05 '13 at 08:14
Set a variable in the future page which could then be checked for on the receiving page. If present = back, if not present then = refresh. To tidy up you could always reset the variable on the receiving page so as to ensure the user hasnt indirectly gone from the future page to the recipient page. — Phill Healey, Sep 05 '13 at 10:59

score 59 · Answer 1 · edited Mar 15 '23 at 16:25

59

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.');
});

edited Mar 15 '23 at 16:25

Peter Mortensen

30,738
21
105
131

answered Sep 04 '13 at 13:01

Er.KT

2,852
1
36
70

41

How does this differentiate between reloads and back buttons? – Chris Middleton May 07 '15 at 19:01
1

It doesn't. Also note that iOS deliberately does not support `beforeunload` events. – Lachlan McDonald Nov 10 '15 at 23:37
1

jQuery.unload() has been removed. See https://stackoverflow.com/questions/23445332/alternative-jquery-library-to-triger-beforeunload-unload-event instead – mojoaxel Mar 27 '17 at 08:40
5

Doesn't answer question :-\ – webdevinci May 16 '17 at 13:52
it works, but we can change the text – Duy Hoang May 30 '18 at 06:06
1

$(window).unload(function() { alert('Handler for .unload() called.'); }); not work :| – R.Akhlaghi Dec 12 '19 at 11:56
Plus one for the Mozilla link. – COil Apr 21 '20 at 17:34

score 15 · Answer 2 · edited Mar 15 '23 at 16:27

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");
        }
    }
}

edited Mar 15 '23 at 16:27

Peter Mortensen

30,738
21
105
131

answered Sep 04 '13 at 19:45

Vipin Malik

159
5

2

event.currentTarget.performance.navigation.type is not working for me, even event.currentTarget.performance is showing undefined for me. will you help more on this, bit more code or script. – Coding Sep 05 '13 at 12:37
Can you provide the FF version you are using? – Vipin Malik Sep 05 '13 at 13:48
i have tried in Firefox 23.0.1 also but still not working – Coding Sep 06 '13 at 07:00
1

Chrome, Safari and Opera are not supported. https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation – Tamás Bolvári Oct 07 '15 at 23:01
1

how to use this function? – SwR Nov 08 '16 at 08:35
lol. funny, fun solution (until people move, remove or retheme their buttons). Creative though. – webdevinci May 16 '17 at 14:07
1

It tells how the page was navigated to, not what is happening now. https://stackoverflow.com/questions/35468281/unexpected-performace-navigation-type-onbeforeunload – Boat Feb 26 '18 at 12:23
Even while closing a browser's tab, performance.navigation.type gives you 1 (performance.navigation.TYPE_RELOAD)! Can we actually detect the browser is about to refresh? – Aniruddha Shevle Jun 25 '20 at 08:31

score 7 · Answer 3 · edited Mar 15 '23 at 16:23

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.

edited Mar 15 '23 at 16:23

Peter Mortensen

30,738
21
105
131

answered Aug 29 '13 at 11:53

developerCK

4,418
3
16
35

Is same thing works on html4 – Android Aug 30 '13 at 10:13
popstate event is defined in html5. so it will work only with html5 compatible browser. – developerCK Aug 30 '13 at 11:07

score -7 · Answer 4 · edited Mar 15 '23 at 16:29

-7

var keyCode = evt.keyCode;
if (keyCode == 8)
    alert('you pressed backspace');

if(keyCode == 116)
    alert('you pressed F5 to reload the page')

edited Mar 15 '23 at 16:29

Peter Mortensen

30,738
21
105
131

answered Sep 05 '13 at 05:25

mostafa khansa

302
1
6

4

what if some user uses his mouse instead of keys? – Joshua Sep 05 '13 at 09:51
i didn't give the full solution, i just presented an idea to help, in the end programmer should work his way out – mostafa khansa Sep 05 '13 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 – mostafa khansa Sep 05 '13 at 11:57
different browser/OS have different way to refresh the browser – Ashish Panwar Aug 03 '16 at 11:28
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 '19 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 01 '20 at 16:38

How can I know whether refresh button or browser back button is clicked in Firefox?

4 Answers4

Linked