CODEWITHSUNDEEP
jqueryajaxhtmlbrowser-historypushstate
Daniel
Daniel

Reputation: 441

Update browser's URL without reloading the page

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?)

Upvotes: 9

Views: 10448

Answers (2)

Jon
Jon

Reputation: 15200

also you can use Jquery history plugin. This will give support to html4 browsers as well.

Here is an article talking about it: http://veerasundaravel.wordpress.com/2011/12/02/change-browser-url-with-reloading-the-page-jquery-html5/

here is another question that gives more options: jQuery History Plugin

Upvotes: 0

Arnaud Le Blanc
Arnaud Le Blanc

Reputation: 99909

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).

Upvotes: 21

Related Questions