I've been doing some research and it appears that the popstate event fires any time that the history is changed, but there doesn't seem to be a built in way to determine whether the user clicked the back button or the forward button in the browser.

My use case is that when going back in the history or forward in the history I have directional animations that occur when transitioning routes in an ajax application. I need to determine if the user is going backwards or forwards so the animations make sense. It's a shame that the popstate event doesn't support the direction of the event.

I'll also mention that my application is an AngularJS application in case there is a angular specific answer, although a more general purpose javascript solution would be optimal.

I've been doing some research and it appears that the popstate event fires any time that the history is changed, but there doesn't seem to be a built in way to determine whether the user clicked the back button or the forward button in the browser.

My use case is that when going back in the history or forward in the history I have directional animations that occur when transitioning routes in an ajax application. I need to determine if the user is going backwards or forwards so the animations make sense. It's a shame that the popstate event doesn't support the direction of the event.

I'll also mention that my application is an AngularJS application in case there is a angular specific answer, although a more general purpose javascript solution would be optimal.

• javascript
• angularjs

Share Follow asked May 17, 2013 at 15:00 nek4lifenek4life 10311 silver badge44 bronze badges 4

• Why not make use of variables? Simply save an incremental state ID in each states and save the last state's ID. When popped, calculate the difference between the old state and the new state and see which "direction" the user went. But yes, a browser native implementation would be nice. – Kiruse Commented May 17, 2013 at 15:02
• Yes that makes sense. I could store global state in the application itself to determine which direction the user is going. I'd rather not have to keep track like that, but if there is no way to determine the direction of the history otherwise I suppose it's what will need to be done. Thanks! – nek4life Commented May 17, 2013 at 15:13
• 1 possible duplicate of How do I retrieve if the popstate event es from back or forward actions with the HTML5 pushstate? – Umur Kontacı Commented Aug 26, 2013 at 7:27
• @Umur That other question specifies apps that use pushState. Anyway, I did post a generalized solution there. It might answer this OP’s question, too. – Michael Allan Commented Mar 16, 2018 at 21:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I'm not sure which understanding is correct, but my understanding of HTML5 pushstate is different.

Push-state support simply allows you to capture changes in the browser's URL that would otherwise be sent as a request to a server (yours or someone else's). The purpose isn't to give you "forward" and "back" events, but more like general "location change" events. Then it's your app's job to check the URL and figure out where the user is trying to go.

Think about it this way: What if the user clicked a link in your app that you wanted to handle with javascript? You would have some event handlers setup which would capture the click and manipulate your app in some way. So clicking "back" or "forward" is like clicking a link, but all you get is the URL that the user is trying to view -- there's no link to bind events to.

So how do you know what the user is trying to do? You could manage state using global variables or any other way you can e up with. If you wanted to reduce code duplication, you could handle all of your app routing using URLs. So your click handler wouldn't bind to a particular link (or set of links), instead you could capture changes in the browser's URL and then determine how to handle the new URL.

BackboneJS does this using a Router object where specific paths are tied to specific router functions, which set the state of the app a particular way, for example:

MyAppRouter = Backbone.Router.extend({
    routes: {
        'home': 'setupHomeScreen',
        'recipes': 'setupRecipesList',
        'recipes/:id': 'setupRecipeScreen'
    },

    setupHomeScreen: function() {
        // ...
    },

    setupRecipesList: function() {
        // ...
    },

    setupRecipeScreen: function(id) {
        // ...
    },

    // ...

});

Please excuse the Backbone code on an Angular question. I'm still learning The Angular Way, and ing from a Backbone background that formed my understanding of pushstate.

To answer your question

If your views form some kind of hierarchy or order, you could store that in a global variable. Maybe you decide to e up with IDs for each view, and then every time the browser state changes, you push those IDs onto an array.

var viewHistory = [];

// ... they visited the recipe list. push it into the history
viewHistory.push('recipeList');

// ... they visited a particular recipe. push it into the history
viewHistory.push('recipe:13');

// ... they clicked the "back" button. we know from the URL that they want
// the recipeList, but we don't know if they're trying to go forward or back.
var nextView = 'recipeList';
if (viewHistory.indexOf(nextView) > 0) {
    // *** Back Button Clicked ***
    // this logic assumes that there is never a recipeList nested
    // under another recipeList in the view hierarchy
    animateBack(nextView);

    // don't forget to remove 'recipeList' from the history
    viewHistory.splice(viewHistory.indexOf(nextView), viewHistory.length);
} else {
    // *** They arrived some other way ***
    animateForward(nextView);
}