Change the url in the address bar without having to reload

Question

I found a lot of questions about changing URLs (without reloading). Some answers were: use plugins, use location.hash ... or reloading

But none of them worked for me.

I have a drop down menu on the website, and when I change it, the url parameter should have changed.

So what I'm trying to do:

I want to change: www.foo.com?country=Germany to www.foo.com?country=Slovenia without a reboot.

Am I trying to achieve what I am trying to achieve?

Answer 1

You can in new browsers; in older ones, you can change the hash. This seems like a good article on this topic: http://html5doctor.com/history-api/

Answer 2

What you are looking for is the HTML5 History API. It comes with features like history.pushState(...) , history.popState(...) that allows you to dynamically change the URL without having to assign a new URL.

It is used by many sites, including, I suspect, Facebook itself, where if you open a chat window and move between pages, the chat window does not restart. This means that all new content is retrieved through Ajax, but then the URL will not change, right? But it is so. I think they do this through history.pushState(...) , where you simply push the new state onto the History stack and change only a specific part of the page. You will find a great tutorial here .