How do you change the URL in the address bar without reloading the page?

Question

How does Shopify do this? Go to their website, click on the Features link and you'll see that the URL in your browser's address bar says:

http://www.shopify.com/tour/sell-online

Then click on any of the sub links and you'll see that the URL in the address bar changes without using a hash and there is no page flip.

I don't think they are using ajax to change the content because it all appears to be included in hidden divs on the page, but regardless, you can apparently change the URL using client side tricks. Your help is appreciated?

Answer 1

You use the new HTML5 history API to push a new state.

Here's the MDN documentation and a good tutorial.

Beware that doing this is often painful (you have to manage correctly the state of your application) and it doesn't work with IE9. It's almost always combined with ajax : it's the solution to let dynamically loaded content be bookmarkable even while the whole page isn't reloaded or changed.