Update browser's URL without reloading the page

jquery ajax html browser-history pushstate
Daniel picture Daniel · Aug 16, 2011 · Viewed 10.4k times · Source

Is it possible to change the URL shown in the browser's address bar without having the browser go to that page? Such as, for example, after updating a page's content via an AJAX call?

My understanding is that this is not possible, which is why sites such as twitter and facebook update the hash-tag on ajax calls.

That is until today, when I went on http://8tracks.com/ and started to play with the filter on the right hand side... turning different genres on and off, I noticed that even though it was doing ajax calls to refresh the content on the page, the URL was also being dynamically updated.

Does anyone know how they do this?

(aside, I'm currently using Chrome, but when I went back and looked again with IE9, I noticed that the URL was not being updated.. is this maybe a Chrome only thing?)

Answer

Arnaud Le Blanc picture Arnaud Le Blanc · Aug 16, 2011

This is possible in modern browsers by using the HTML5 History API:

history.pushState(null, null, '/some-path')

See https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState%28%29.c2.a0method

This works in Firefox, Chrome, Opera, Safari (not IE).

Related questions

How to send FormData objects with Ajax-requests in jQuery?

The XMLHttpRequest Level 2 standard (still a working draft) defines the FormData interface. This interface enables appending File objects to XHR-requests (Ajax-requests). Btw, this is a new feature - in the past, the "hidden-iframe-trick" was used (read about that in my …

Read More
Refresh/reload the content in Div using jquery/ajax

I want to reload a div on click of a button. I do not want to reload the full page. Here is my code: HTML: <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="…

Read More
Set timeout for ajax (jQuery)

$.ajax({ url: "test.html", error: function(){ //do something }, success: function(){ //do something } }); Sometimes success function works good, sometimes not. How do I set timeout for this ajax request? In example, 3 seconds, if time is out, then show an error. The …

Read More