Registering click handlers with browser back/forward buttons

Question

I am building an HTML5 single-page web app that employs the concept of "views" or "screens"; essentially just different DOM elements rendered to be visible at any given time. As the user navigates between "views", I'm really just hiding/enabling DOM elements.

I'd like to be able to make use of the browser's history functionality, including the back/forward buttons, but I'm not sure how that plays into the concepts of history.pushState and window.onpopstate.

Ideally, I'd like to register "click handlers" with the browser's back/forward history buttons (obviously in a cross-browser-compatible way) so that when the user clicks either button, it engages my own custom Historian object (in JavaScript) that figures out which "view" to render for the user.

How can I do this?

Answer 1

Firstly, you need some sort of routing solution. You can use Crossroads to register and manage your routes. Each route should have a handler, which enables the appropriate div in your single page.

var route1 = crossroads.addRoute('/page1/', function(id){
  //enable div for page1 route
});

Then, you can use Hasher to manage browser history.

Another way is to rebuild your application with Durandal, which has a router and manages browser history out of the box.