How to change URL in browser without navigating away from page?

Question

I am writing a complex AJAX application at the moment and the entire site has clean URLs. At the moment PHP creates the basic layout for each page however I don't want to have to navigate away from each page when the user clicks on a link, and I don't want to have a hash in the URL because it won't fit with the rest of the site. I know that this has cropped up loads before on the site and it seems to be quite commonly asked but I was wondering if there was a neat HTML5 way of just appearing to change the URL in the address bar even if it technically remains on the same page.

Answer 1

You can do it with history.pushState, but only in browsers that support it. Just try the following line in your browsers JavaScript-Console.

history.pushState({},"URL Rewrite Example","https://stackoverflow.com/example") 

More on that in The pushState() method (Mozilla Developer)

Similar question How do I, with JavaScript, change the URL in the browser without loading the new page?

Answer 2

As others have stated, HTML5's history.pushstate is the way to go. Try browsing a repo on github to see it in action (https://github.com/visionmedia/express).

Trouble is the only version of IE that supports history.pushstate is IE10, which kinda sucks.

Plenty of sites use hashbang #! URL's such as Twitter (e.g. https://twitter.com/#!/Sironfoot ). The hashbang is a URL pattern agreed on by search engines so that they can still trawl and index a heavily Ajax powered website (more info here http://code.google.com/web/ajaxcrawling/docs/specification.html), so you could go that route.

The only other approach is to use history.pushstate for browsers that support it, and fall back to full-page refreshes for non-supporting browsers.