Change URL from Javascript like facebook does

Question

I'm currently working in a AJAX oriented web application. I have been looking for the different ways of replicating the current AJAX state (or Application state) with the browsers url so refreshing and back-button also works.

In the last weeks I see different approaches involving the use of the hash (#) and different JS-frameworks.

In the documentation it is stated, that changing the browsers URL from JS is not possible. Today I went to Facebook and opened an image, and the url changed (Altough the image was opened in a lightbox). After the image was closed, the browser url changed back to the original page.

Do you have any idea how they achieve this behavior?

Answer 1

There is a feature of HTML5 that supports what you are referring to. See http://spoiledmilk.dk/blog/html5-changing-the-browser-url-without-refreshing-page .

Some systems implement this by checking for window.history.pushState, and if so, using it, otherwise falling back to hashtags. If SEO is of concern, use #! instead of #. See http://code.google.com/intl/es/web/ajaxcrawling/docs/getting-started.html .

Hope that helps.

Answer 2

You are able to manipulate the has value at the end of the URL like this:

var hashVal = 'somevalue';
window.location.hash = '#' + hashVal;

And then the url will become www.something.com/#somevalue

Answer 3

You can manipulate the hash value as Neal pointed out. But i would recommend using a library for doing the same. Here's one that i use

http://developer.yahoo.com/yui/history/

Hash values in the URL are manipulated mainly for back button and bookmark integration. Hope this helps.