How to refresh page on history.state change (on back button click)?

Question

I'm testing new JS/HTML5 history methods. On subpage load I have an event changing the URL and history state:

$("#content").load("./content/map.txt", function() {
     history.pushState({}, "map", "map.html" );
     window.history.go(1);
});

Now when the user clicks back button the history.state and the URL changes, but without loading the previous page (without refreshing the current URL).

I tried to add a manual refresh on the history.state change, I found something like this:

window.addEventListener('popstate', function(e){
     if (history.state){
         self.loadImage(e.state.path, e.state.note);
     }
}, false);

but it doesn't work.

Answer 1

Try this:

window.onpopstate = function(event) {
  if(event.state["map"] == "some_state") // get the current state from the event obj
    location.reload(); // reloads the current page to clear ajax changes
};