How do I actually use history.js on my site How do I actually use history.js on my site jquery jquery

How do I actually use history.js on my site


Just adding history support to your site won't help you in any way unless you actually have functions in place that make use of it.

As far as modernize goes it just tells you if history is supported on the current browser and if you take action x else action y

Ok so this is how history would work:

Consider history.js kind of like a macro recorder. A client clicks something and you push some variables that you associate with a made up or real url:

Client clicks a search for example, you call:

function search(params) {  // record your current UI position  // data (to save), title (to set on page), url (to set on page)  History.pushState({ params: params }, "Search", "?search");   // now run whatever should happen because client triggered search()}

And now when the client clicks the back button, you can get the previously saved state to do something with it. Since the client hits his backbutton, it will trigger statechange. And since you are subscribed to that event, you can determine what state you previously saved and call functions to change the UI accordingly.

// Bind to StateChange EventHistory.Adapter.bind(window, 'statechange', function() {  var State = History.getState();  // returns { data: { params: params }, title: "Search": url: "?search" }  console.log(State);   // or you could recall search() because that's where this state was saved  if (State.url == "?search") {    search(data.params);  }});

That pretty much sums it up. Client triggers a function, you assign a state/url, and when client clicks back you look at your previous state and run functions depending on if you want to restore UI or other.

This can all quickly become complicated and tricky code and I don't see what else there is to explain, so unless you just got the AHA! and now know what to do, I'd just forget about this stuff for now.

There is absolutely nothing automatic going on here aside for saving/restoring states, everything else in your application will need to be hand-coded to take into account what happens if a state changes.

Also deep linking has nothing to do with these things. Your application has to have the capacity to initialize itself and display specific UI elements uniquely based on calling it directly via a url. History is solely for state management when users are already using your application, so you are able to control what happens when they hit the back/forward button.

And anything that happens via JS, will give you zero benefits as far as search engines are concerned as they don't care about js and will just index the raw text of you page. So if you want search engine compatible deep linking, you need server side code that renders you UI to a specific state depending on requested URL.