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 h

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.