Is there a way in History.js to know when the back button was pressed

Question

I've started to test History.js. After understanding how it works and that there is no popstate, instead there is statechange. I'm looking for a way to differ when the back button of the browser has been pressed.

The reason is that I need to know the URL before the state moved, from the one I'm going to. With the gist the project includes, only the URL we go to is looked.

I hope the solution is not to track latest URL visited in a global variable.

Thanks

Federation

Answer 1

I finally managed all links using History.pushState, that way there is no need to differ a back button pressed. We handle all state changes the same way.

Edit: Found these two issues in History.js' Github, might help someone. https://github.com/browserstate/history.js/issues/70 https://github.com/browserstate/history.js/issues/47

Federation

Answer 2

I found the solutions on github to be a bit overdone for my purposes. I created a bool that is always true except right before when I used History to change the state.

var manualStateChange = true;

History.Adapter.bind(window,'statechange',function(){
    if(manualStateChange == true){
     // BACK BUTTON WAS PRESSED
    }
    manualStateChange = true;
});

Any time I change the state programmatically, set the bool to false:

manualStateChange = false;
History.pushState(null, null, currentPath);

Judaea

I did the same thing, but this will not differentiate between 'back' and 'forward' buttons. – Buschi

This is exactly what I needed, thanks :D ... I just needed location.reload() in the // BACK BUTTON PRESSED bit, so 'back' and 'forward' isn't a concern :D – Trifle

I agree with @Buschi that this will not differentiate between 'back' and 'forward' buttons. So comment // BACK BUTTON WAS PRESSED in your code is misleading. You should change it to // BACK OR FORWARD BUTTON WAS PRESSED. – Cuisse

Answer 3

I know this is a pretty dated question, but I came up to a solution to issues with the back/forward button when switching between a standard page and a History-state page.

Scenario: Use HTML5 History (or history.js plugin) on a set of pages Then other pages we need real loads, aka a standard page (don't ask why, but there are certain use cases that this may be needed)

When you go from a History-state page, and do a real load to a standard page. You cannot go BACK: it changes the url, but doesn't load the page--it only fires a statechange; which I assume is the issue of the original post. My personal opinion is that this is a browser bug (all browsers have the issue, though), because the browser should know the page you're on was reloaded outside of the History-state page.

I fixed this with something really simple: Listening to the statechange event and tell the browser to refresh when it does fire. This way I don't care if they go back or forward out of this page. If the browser thinks the state is changing (links don't fire the statechange event), only back/forward INTO a History state page fires this event, so it solves the issue.

Code, using jQuery + History.js plugin:

$(window).on('statechange', function() {
    window.location.reload();
});

If this doesn't make sense, you're probably not having this issue. However, I've noticed this on many sites that do use HTML 5 History (even pinterest.com has this issue if you reload when on an image modal and then try to go back).

Hopefully, if you do have this issue, you'll find this answer and have a huge sigh of relief :)

Manlove

I had thought of similar logic, however, statechange gets triggered when issue pushState and when back/forward is pressed, which creates infinite reloading loop. – Choroid

Indeed, a huge relief. I was about to give up. – Slocum

Answer 4

In the 'offical' version this feature is not available. Try to use this file in the main while: https://github.com/danger89/history.js/blob/master/scripts/bundled/html5/jquery.history.js

I can't guarantee that his solution works for every browser. But it's a nice solution. If you applied his changes, you can use:

var State = History.getState();
if (State.navigation) {
    // Back / forward button is pressed.
}

More information can be found on Github issue 47.

Waterer

Answer 5

Similar answer than that of James Wagoner. the 'statechange' event was being fired both ways, so instead I only check for a 'popstate' event, which in my case is only called when the user goes back.

window.addEventListener('popstate', function() {
  window.location.reload();
});

Oslo