How to know whether refresh button or browser back button is clicked in Firefox

javascript browser cross-browser dom-events

176,324

Solution 1

Use for on refresh event

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

https://developer.mozilla.org/en-US/docs/Web/API/window.onbeforeunload?redirectlocale=en-US&redirectslug=DOM%2Fwindow.onbeforeunload

And

$(window).unload(function() {
      alert('Handler for .unload() called.');
});

Solution 2

Use 'event.currentTarget.performance.navigation.type' to determine the type of navigation. This is working in IE, FF 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");
        }           
    }
}

Solution 3

For 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 is inside document area https://developer.mozilla.org/en-US/docs/Web/API/event.clientX

176,324

Author by

Coding

i love programming.

Updated on April 29, 2020

Comments

Coding about 4 years

How to know in Firefox whether refresh button is clicked or browser back button is clicked... for both events onbeforeunload() method is a callback. For IE 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{
        // 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 any other way to find it?

Android over 10 years

Is same thing works on html4
developerCK over 10 years

popstate event is defined in html5. so it will work only with html5 compatible browser.
Joshua over 10 years

what if some user uses his mouse instead of keys?
mostafa khansa over 10 years

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 over 10 years

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
Coding over 10 years

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.
Admin over 10 years

Can you provide the FF version you are using?
Coding over 10 years

i have tried in Firefox 23.0.1 also but still not working
Chris Middleton almost 9 years

How does this differentiate between reloads and back buttons?
Tamás Bolvári over 8 years

Chrome, Safari and Opera are not supported. developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigati‌on
Lachlan McDonald over 8 years

It doesn't. Also note that iOS deliberately does not support beforeunload events.
Ashish Panwar over 7 years

different browser/OS have different way to refresh the browser
SwR over 7 years

how to use this function?
mojoaxel about 7 years

jQuery.unload() has been removed. See stackoverflow.com/questions/23445332/… instead
webdevinci almost 7 years

Doesn't answer question :-\
webdevinci almost 7 years

lol. funny, fun solution (until people move, remove or retheme their buttons). Creative though.
Boat about 6 years

It tells how the page was navigated to, not what is happening now. stackoverflow.com/questions/35468281/…
Duy Hoang almost 6 years

it works, but we can change the text
Cody over 5 years

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
R.Akhlaghi over 4 years

$(window).unload(function() { alert('Handler for .unload() called.'); }); not work :|
COil about 4 years

Plus one for the Mozilla link.
dmikester1 almost 4 years

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.
Aniruddha Shevle almost 4 years

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?