How do links work in soundcloud?

Question

I have noticed in quite few websites like soundcloud where when you click on a link, the page loads like it was there only something like ajax, but still the address changes in address bar.

For example, when I am exploring sounds on soundcloud, clicking on a link, opens the page but the background music keeps on playing. If its ajax, then how do the address changes in address bar.

I am newbie web developer, want to learn this technique!!!

score 1 · Answer 1 · answered May 29 '13 at 17:04

Check out history.pushState.

HTML5-friendly browsers supports new history apis named pushState/replaceState that enables javascript to take control of browser history without reload the page. In older browser, features like location.hash is usually used.

score 0 · Accepted Answer · answered May 29 '13 at 17:01

0

Perhaps, you should have a look at this http://diveintohtml5.info/history.html or https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history

answered May 29 '13 at 17:01

Thomas Junk

5,588
2
30
43

score 0 · Answer 3 · edited May 23 '17 at 11:50

Have a look at this question's answer https://stackoverflow.com/a/4059844/1558255

In it you can see examples for the use of window.history in HTML5 such as the following from Alfred Nerstu's answer.

  window.history.pushState('Object', 'Title', '/new-url');

If you just want to change the url without being able to go back

  window.history.replaceState('Object', 'Title', '/another-new-url');

The object can be used for ajax navigation:

  window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

  window.onpopstate = function (e) {
     var id = e.state.id;
     load_item(id);
  };

How do links work in soundcloud?

3 Answers3

Linked