Question

So, after redesigning my site, I thought I would use the HTML5 history API, when I saw brilliant use of it here: http://diveintohtml5.ep.io/examples/history/casey.html

Problem is, the code provided doesn’t work for me, (using Chrome 8).

Not entirely sure why, but it simply refreshes the page with the href value of the link after the partial content is successfully loaded.

Are there any other examples of this use of the API? I dont want History.js or anything like that as that uses hash/hashbangs as a fallback. I’m trying to get rid of these.

Any ideas?

edit: Firebug throws a ‘link has no value’ at me as well as countless requests for the partially loaded content. After these the page refreshes

Answer 1

You have to intercept the link click and call your own pushState – if you check out the code on the page you will see the event handler:

function addClicker(link) {
  link.addEventListener("click", function(e) {
    if (swapPhoto(link.href)) {
      history.pushState(null, null, link.href);
      e.preventDefault();
    }
  }, true);
}