3

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?

Nicolas
  • 186
  • 2
  • 15
  • 2
    possible duplicate of [How is Github Changing Pages and the URL so smoothly without AJAX?](http://stackoverflow.com/questions/5216314/how-is-github-changing-pages-and-the-url-so-smoothly-without-ajax) – Quentin May 05 '11 at 15:27
  • 1
    Not a duplicate, but good for supplemental information: [What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?](http://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for) – Jeremy May 05 '11 at 15:29
  • @DAvid Thanks for the hint! I think thats a good place to start looking for this! Great help! – Nicolas May 05 '11 at 15:48
  • 3
    possible duplicate of [Facebook and Ajax](http://stackoverflow.com/questions/5792859/facebook-and-ajax) – ifaour May 05 '11 at 18:32

3 Answers3

7

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.

Abe
  • 71
  • 1
  • 2
1

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

Naftali
  • 144,921
  • 39
  • 244
  • 303
  • 1
    Thanks, but as I explained on the post, I already tried this approach and works fine. I'm interesting about doing it without the hash! As facebook does. Should be possible somehow not? – Nicolas May 05 '11 at 15:45
  • @Nicolas, facebook uses hashes all over the place! – Naftali May 05 '11 at 15:45
  • Not really, or at least I don't see them on my url. Can it be that the browser is hidding the hash somehow? – Nicolas May 05 '11 at 15:47
  • @Nicolas see this: http://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for – Naftali May 05 '11 at 15:48
  • thanks again for your quick reply. But I have already checked out that link. My version of facebook seems to be using something like this: http://html5demos.com/history/first because I don't see any Hash at all – Nicolas May 05 '11 at 15:51
  • 3
    I think Nicolas is using an HTML5-enabled browser and Neal is not. Why was this answer accepted? – StriplingWarrior Oct 21 '11 at 21:42
0

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.

Aravindan R
  • 3,084
  • 1
  • 28
  • 44