22

I have a click that changes things on the page when you click it. I was wondering if there was a way to trigger an effect when you press the back button on the browser

  • Basically no but you could still have a look to onbeforeunload event which is not specific to browser's back button and which behaviour differs from browser to browser – A. Wolff Jul 13 '13 at 09:01
  • You need to give more information and some sample of what u have done so far and any error u couldn't figure out . You question is very vague. – Kiran Ruth R Jul 13 '13 at 09:02

5 Answers5

30

You can sort of do it using the popstate event:

window.onpopstate = function() {
  alert("pop!");
}

or in jQuery:

$(window).on('popstate', function(event) {
 alert("pop");
});

However this will also trigger when navigating forward, not only backward.

user1721135
  • 6,864
  • 8
  • 34
  • 63
  • Since it's tagged jQuery, you'd be better off suggesting `$(window).on("popstate", fn)`. – alex Jul 13 '13 at 09:09
  • This is a very elegant solution. Can it be extended just as elegantly to prevent a user navigating forwards or backwards? (Note: This is in reference to an Ajax based site where the usual `onbeforeunload` approaches [don't work](http://stackoverflow.com/questions/21583771/how-to-trigger-onbeforeunload-with-back-button-in-an-ajax-based-application)). – user1063287 Feb 06 '14 at 07:40
  • 2
    However, I don't know somehow it doesn't work after I go back and forth to the page a few times (using Chrome, Firefox) – Gloria Chen Dec 06 '21 at 00:37
14

Disable back url

$(function() {
    if (window.history && window.history.pushState) {
        window.history.pushState('', null, './');
        $(window).on('popstate', function() {
            // alert('Back button was pressed.');
            document.location.href = '#';

        });
    }
});
Sakthi Karthik
  • 3,105
  • 4
  • 25
  • 29
  • 3
    that's a great hack. but gives a "Max Stack Size exceed" error on `document.location.href = '#';` – techie_28 Jul 31 '18 at 05:13
  • TL;DR: Thank you very much. Good move. I agree that this is an extremely useful hack. Immediately pushing history state overcomes the unavailability of popstate when there is no current document history state. This enabled me to judiciously fire an event while a particular view is visible in my SPA that gives users (including me, who designed it) the propensity to use the back button rather than the in-page back button. – Jim Speaker Apr 22 '22 at 08:59
4

use this code for detecting browser back button event

<script>
    if (performance.navigation.type == 2) {
        alert("Back button clicked");
    }
</script>
ROOT
  • 11,363
  • 5
  • 30
  • 45
Alok Kumar Kasgar
  • 89
  • 2
2

You can simply fire the “popState” event in JQuery e.g:

$(window).on('popstate', function(event) {
    alert("pop");
});

This is enough for what you asked … but here are few add on window event to go with…

$(window).on('pushstate', function(event) {
    alert("push");
}); // This one pushes u to forward page through history...

window.history.replaceState(); //work exactly like pushstate bt this one replace the history instead of creating new one...
window.history.backward(); // To move backward through history, just fire this event...
window.history.forward();// To move forward through history ...
window.history.go(-1); // Go back to one page(or whatever value u passed) through history
window.history.go(1); // Go forward to one page through history..
Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
iamitpkumar
  • 31
  • 4
0

You can use popstate to detect when back.

$(window).on('popstate', function(event) {
  alert("You are going to back page. Can work that?");
});
button {
  padding: 5px;
  border-radius: 5px;
  background: limegreen;
  border: 1px limegreen solid;
  color: white;
  width: 100px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <button onclick="window.history.back()">Back</button>
    <p>Or you can click on browser back button.</p>
  </body>
</html>

Thank you if work.!.?

Mubarrat Hasan
  • 156
  • 13