How do I retrieve if the popstate event comes from back or forward actions with the HTML5 pushstate?

javascript html browser-history pushstate
Davsket picture Davsket · Jan 24, 2012 · Viewed 34.4k times · Source

I'm developing a webpage where depending on the next or back actions I do the correspondent animation, the problem comes when using the pushstate. When I receive the event how do I know if the user clicked back or forward history buttons using the Pushstate API?, or do I have to implement something myself?

Answer

bennedich picture bennedich · Jan 24, 2012

You must implement it yourself which is quite easy.

  • When invoking pushState give the data object a unique incrementing id (uid).
  • When onpopstate handler is invoked; check the state uid against a persistent variable containing the last state uid.
  • Update the persistent variable with the current state uid.
  • Do different actions depending on if state uid was greater or less than last state uid.

Related questions

How to detect when history.pushState and history.replaceState are used?

Is there some event I can subscribe to when the history state is modified? How?

Read More
JS - window.history - Delete a state

Using the html5 window.history API, I can control the navigation pretty well on my web app. The app currently has two states: selectDate(1) and enterDetails(2). When the app loads, I replaceState and set a popState listener: history.replaceState({stage:"…

Read More
Ajax with history.pushState and popstate - what do I do when popstate state property is null?

I'm trying out the HTML5 history API with ajax loading of content. I've got a bunch of test pages connected by relative links. I have this JS, which handles clicks on those links. When a link is clicked the handler …

Read More