What js should I use to handle back button clicks while using onPopState and pushState

Question

I'm using pushState to change the url of a website:

history.pushState("", "info", "/info");

Which works great, but now the back button doesn't work. I believe I need to write my own back and forward button behavior using onPopState that goes through the history stack and renders the appropriate page. The trick is that when "back" is Null, it should do the thing that the back button normally would do (go "back" to the page before the user entered my site).

This seems like pretty standard behavior, is there a recipe / some standard code I could use?

How do you handle direct entries of your `yourdomain.com/info`? Does this work correctly? — Felix Kling, Jan 12 '11 at 01:00

score 2 · Answer 1 · answered Jan 12 '11 at 00:35

Ah I came up with a solution, not as hard as I thought (basically it just uses the url pathname to render the right stuff):

// Makes the back button work
window.onpopstate = function(event) {
    if (document.location.pathname == '/main') {
        $("#main").show();
        $("#info").hide();
        $("#settings").hide();
    }
    if (document.location.pathname == '/info') {
        alert('info');
        $("#main").hide();
        $("#info").show();
        $("#settings").hide();
    }
    if (document.location.pathname == '/settings') {
        alert('settings');
        $("#main").hide();
        $("#info").hide();
        $("#settings").show();
    }
};

Although this will work, I think it's unnecessary if you enter a non-empty state in the original `pushState()` function. `history.pushState({state:"dummy state"}, "info", "/info");` — cartbeforehorse, Jul 07 '13 at 13:52

score 1 · Answer 2 · answered May 05 '13 at 05:24

1

Without frameworks it is just:

window.onpopstate = function(event){
   // do something
}

answered May 05 '13 at 05:24

gaby de wilde

1,313
12
6

score 1 · Answer 3 · answered Jul 07 '13 at 13:46

I've just come across this problem myself, and I think I found out why it doesn't work.

The documentation seems very vague on this topic. That which I've read says that that you can enter an empty string (or empty object) into state parameter (as you have done in your example).

history.pushState("", "info", "/info");

When I do this, (testing in both Chrome and Firefox), the "back" and "forward" buttons do work, in the sense that they change the link in the browser's address-bar. However, that's all they do -- the page associated with that link doesn't load!

So now try this:

history.pushState({state: dummyState}, "info", "/info");

Now, the "back" and "forward" buttons seem to work as I'd expect them to. It's as though the browser says "if there's no 'state' to latch onto, then I'm not going to bother loading the page".

Given that it works the same way in both Firefox and Chrome, I'm guessing this is a documented feature. But if it is, it's buried deeper than I care to search.

score 0 · Answer 4 · answered Jan 30 '11 at 13:54

Strange that the back button isn't working for you. I'm using History.js which provides a backwards compatible experience for all non HTML5 browsers, and I haven't experienced this issue in any of the browsers or test suites... Perhaps you'll want to give that a go?

score 0 · Answer 5 · answered Feb 04 '11 at 13:13

I don't think you need to do anything yourself to implement the back and forward button behaviour after using pushState, it should still work as before, but it will trigger popstate rather than make an http request etc.

I'm using Davis.js to achieve something similar to what you have, routing certain onpopstate events to behaviour, check it out.

What js should I use to handle back button clicks while using onPopState and pushState

5 Answers5

Linked