How does this site change the site location?

Question

http://www.beatport.com

How are they doing that?

They are changing the url in the browser without using hash like # characters and stuff like that. And without refreshing, just ajax :|

The URLs look like normal URLs, you can go from the homepage directly to http://www.beatport.com/genre/psy-trance/13 without page refresh

It ends up as http://www.beatport.com/#genre/psy-trance/13 (YES the # is in there) after it loads. The same happens with the other links on the page. when hovering over them the # is not shown but after the link is clicked/loaded the # is in the location. — Eddy, Aug 09 '11 at 18:47
it's not there!!1 :D all links are normal, no `#` and the urls too.. Is this black magic or something? — BiberFiver, Aug 09 '11 at 18:48
It depends on whether your browser supports HTML5 History or not. Try with some old IE or FF 3.6> to see the hashes. — Gustav Barkefors, Aug 09 '11 at 18:51
http://stackoverflow.com/questions/4612598/which-browsers-support-the-html5-history-api — Gustav Barkefors, Aug 09 '11 at 18:54

score 3 · Accepted Answer · edited Oct 08 '11 at 20:15

3

You can do it using the History API.

http://diveintohtml5.ep.io/history.html https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

edited Oct 08 '11 at 20:15

DanBeale

answered Aug 09 '11 at 18:50

Eduardo

this is sick... now there's no reason not to use ajax for everything – BiberFiver Aug 09 '11 at 18:51
Of course there is. It just changes the location url. It won't load the new page for you. You still need to use Ajax to get the new content and append it to the page. It just solves the problem with back buttons on AJAX websites. – Eduardo Aug 09 '11 at 18:54
yea, but that was the only problem with ajax. now it's gone so you can use ajax to get new pages. I'm going to hook on live(click) all my links and replace all body elements with the ones from the target page :) – BiberFiver Aug 09 '11 at 18:57
Feel free if you don't need to support iE – Eduardo Aug 30 '11 at 19:33

score 1 · Answer 2 · edited Oct 08 '11 at 20:15

1

They're probably leveraging the HTML 5 History API.

edited Oct 08 '11 at 20:15

DanBeale

answered Aug 09 '11 at 18:49

AKX

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

Correcting my previous answer, see Modify the URL without reloading the page. See the second answer.

edited May 23 '17 at 12:04

Community

answered Aug 09 '11 at 18:45

Madara's Ghost

3 Answers3