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?

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?

• javascript
• html
• back-button
• pushstate

• How do you handle direct entries of your yourdomain./info? Does this work correctly? – Felix Kling Commented Jan 12, 2011 at 1:00

5 Answers 5

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();
    }
};

I've just e 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.

Without frameworks it is just:

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

Strange that the back button isn't working for you. I'm using History.js which provides a backwards patible 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?

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.