History.js: I just want to change the URL, no need to manage history

Question

I am using HTML5 to change the URL of my page once it loads. This is because the real URL shows a long cacheID which I do not want to display. I use the HTML5 History API to change the URL of the current window and now the user can share and bookmark the URL without the annoying cacheID.

This is the code I am using, and it executes when the page loads:

<script type="text/javascript">
window.history.pushState(null, "Title", "/url");
</script>

After it executes, I see in my address bar: http://mydomain.com/url

This is good.

Now I would like to use History.js so that my site can support users with older browsers.

How do I go about it?

First, I include this:

<script src="http://browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js" type="text/javascript"></script>

Then I put the same code I used previously

<script type="text/javascript">
window.history.pushState(null, "Title", "/url");
</script>

It does not work. Because I think I have to create new objects, but I am not sure how to go about that. Any help would be appreciated. Thanks.

Answer 1

Looks to me like you've forgot to include jQuery, since you're including a version of History.js that's built for this. Without including jQuery before jquery.history.js, the latter will fail.

EDIT:

After including jQuery before jquery.history.js, do window.History.pushState(null, "Title", "/url");. Notice that History starts with a capital H, this is important.

See my fiddle for how to use History.js. I've only tried it with Chromium, but see if that works in IE8 for you.