Is there a way to catch the back button event in javascript?

Question

Is there a way to respond to the back button being hit (or backspace being pressed) in javascript when only the location hash changes? That is to say when the browser is not communicating with the server or reloading the page.

Jonny Buchanan · Accepted Answer · 2015-02-07T20:13:28.257

31

Use the hashchange event:

window.addEventListener("hashchange", function(e) {
  // ...
})

If you need to support older browsers, check out the hashChange Event section in Modernizr's HTML5 Cross Browser Polyfills wiki page.

edited Feb 07 '15 at 20:13

answered Sep 25 '08 at 23:50

Jonny Buchanan

61,926
17
143
150

Nice to see that answers from StackOverflow are already hitting the top of google hits for old questions. This worked for me, but there were some conditions with problems in the code I was calling if it changed, which didn't let the hash change line execute. A good tip might be to do it last. – ironfroggy Nov 06 '08 at 23:45
20

In current browsers, you should use the onhashchange event http://msdn.microsoft.com/en-us/library/cc288209(v=vs.85).aspx – EricLaw Aug 27 '11 at 19:27
Nice improvement on the answer. – pqsk Feb 07 '15 at 03:18

score 7 · Answer 2 · edited Feb 23 '12 at 14:07

I did a fun hack to solve this issue to my satisfaction. I've got an AJAX site that loads content dynamically, then modifies the window.location.hash, and I had code to run upon $(document).ready() to parse the hash and load the appropriate section. The thing is that I was perfectly happy with my section loading code for navigation, but wanted to add a way to intercept the browser back and forward buttons, which change the window location, but not interfere with my current page loading routines where I manipulate the window.location, and polling the window.location at constant intervals was out of the question.

What I ended up doing was creating an object as such:

var pageload = {
    ignorehashchange: false,
    loadUrl: function(){
        if (pageload.ignorehashchange == false){
            //code to parse window.location.hash and load content
        };
    }
};

Then, I added a line to my site script to run the pageload.loadUrl function upon the hashchange event, as such:

window.addEventListener("hashchange", pageload.loadUrl, false);

Then, any time I want to modify the window.location.hash without triggering this page loading routine, I simply add the following line before each window.location.hash = line:

pageload.ignorehashchange = true;

and then the following line after each hash modification line:

setTimeout(function(){pageload.ignorehashchange = false;}, 100);

So now my section loading routines are usually running, but if the user hits the 'back' or 'forward' buttons, the new location is parsed and the appropriate section loaded.

score 3 · Answer 3 · answered Jul 17 '12 at 19:33

3

Check out history.js. There is a html 5 statechange event and you can listen to it.

answered Jul 17 '12 at 19:33

JulianW

1,017
7
3

score 1 · Answer 4 · answered Sep 25 '08 at 23:48

1

onLocationChange may also be useful. Not sure if this is a Mozilla-only thing though, appears that it might be.

answered Sep 25 '08 at 23:48

pix0r

31,139
18
86
102

score 1 · Answer 5 · answered Sep 25 '08 at 23:52

1

Did you took a look at this? http://developer.yahoo.com/yui/history/

answered Sep 25 '08 at 23:52

powtac

40,542
28
115
170

this is really interesting. Now I need to figure out how it is doing this behavior – Steven Noble Sep 26 '08 at 00:02
1

The above link is broken, which is why it's important to always summarize the linked content. – Scott Schupbach Jan 20 '19 at 22:39

Is there a way to catch the back button event in javascript?

5 Answers5

Linked

Related