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

问题

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?

回答1:

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

回答2:

Without frameworks it is just:

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

回答3:

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.

回答4:

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?

回答5:

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.

来源：https://stackoverflow.com/questions/4664056/what-js-should-i-use-to-handle-back-button-clicks-while-using-onpopstate-and-pus

标签

javascript

html5

back-button

pushstate