How to detect if the user clicked the "back" button

Question

When the user goes history-back-1...how do I detect that? And then, alert "the user clicked back!"

Using binds (and jQuery preferably)

Cheesecake

Alex, you just asked a similar question at #2009265 Don't spam. – Gram

Possible duplicate of In Javascript, preferably JQuery, how do I add something to the URL when the user clicks "back" button in the browser? – Economy

Answer 1

You generally can't (browser security restriction). You can tell if the user navigates away from the page (onbeforeunload, onunload fire) but you can't tell where they went unless you've set up your page to allow it.

HTML5 introduces the HTML5 History API; in conforming browsers, the onpopstate event will fire if the user navigates back to an earlier "page" on your site.

Fortunna

What about this? #10463011 – Redbreast

You can construct pages in such a way that hitting back is detectable, but the only way you can know where they went is if they happened to navigate to another page on your site (where you control the JavaScript). How to construct such a scenario? When the user visits "PageA.htm" you immediately send them to "PageB.htm" and if they load "PageA.htm" again, you can "guess" that they've hit "Back." – Fortunna

onpopstate will fire if you navigate forward as well – Surplus

Answer 2

try:

window.onbeforeunload = function (evt) {
  var message = 'Are you sure you want to leave?';
  if (typeof evt == 'undefined') {
    evt = window.event;
  }
  if (evt) {
    evt.returnValue = message;
  }
  return message;
}

Willed

OnBeforeUnload will also fire if the user goes to some other site. – Fortunna

is there any way to not display the alert message? – Ursuline

Answer 3

window.onpopstate=function()
{
  alert("Back/Forward clicked!");
}

Angelus

This will not fire if you visit another page and then come back to this page. – Ferritin

Answer 4

Following are the steps to detect back button click:

1. Register a mouse down event on body $('body').on('mousedown', 'on all li');
2. Now set a variable when mousedown event occur.
3. Check this variable when your location changes.

IF variable changes to true it means list clicked otherwise back button.

This work in my use case. This solution may help others because it depends on app design.

Kero

what about the browser next and refresh buttons? – Hindman

Answer 5

hide loading onload or when using back button:

        jQuery(document).ready(function ($) {
            $.minicart.hideLoading();
        });
        window.addEventListener('load', function () {
            jQuery(document).ready(function ($) {
                $.minicart.hideLoading();
            });
        });
        window.onload = function () {
            $.minicart.hideLoading();
        }

Bowknot

Answer 6

On the page you are looking at, you can add this piece of code to the onLoad event to move them back the page they were on.

if(history.length>0)history.go(+1)

If you want the alert then make it

if(history.length>0)alert("the user clicked back!")

Confessional

Won't work for anything. history.length > 0 will give you true even when its a brand new page. It gives you the entire length of history including the backwards and forwards pages. – Ferritin