How do we update URL or query strings using javascript/jQuery without reloading the page?

Question

Is there a way to update the URL programatically without reloading the page?

EDIT: I added something in the title in post .I just want to make it clear that I don't want to reload the page

Answer 1

Yes and no. All the common web browsers has a security measure to prevent that. The goal is to prevent people from creating replicas of websites, change the URL to make it look correct, and then be able to trick people and get their info.

However, some HTML5 compatible web browsers has implemented an History API that can be used for something similar to what you want:

if (history.pushState) {     var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';     window.history.pushState({path:newurl},'',newurl); } 

I tested, and it worked fine. It does not reload the page, but it only allows you to change the URL query. You would not be able to change the protocol or the host values.

For more information:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Answer 2

Yes - document.location = "http://my.new.url.com"

You can also retrieve it the same way eg.

var myURL = document.location; document.location = myURL + "?a=parameter"; 

The location object has a number of useful properties too:

hash            Returns the anchor portion of a URL host            Returns the hostname and port of a URL hostname        Returns the hostname of a URL href            Returns the entire URL pathname        Returns the path name of a URL port            Returns the port number the server uses for a URL protocol        Returns the protocol of a URL search          Returns the query portion of a URL 

EDIT: Setting the hash of the document.location shouldn't reload the page, just alter where on the page the focus is. So updating to #myId will scroll to the element with id="myId". If the id doesn't exist I believe nothing will happen? (Need to confirm on various browsers though)

EDIT2: To make it clear, not just in a comment: You can't update the whole URL with javascript without changing the page, this is a security restriction. Otherwise you could click on a link to a random page, crafted to look like gmail, and instantly change the URL to www.gmail.com and steal people's login details.
You can change the part after the domain on some browsers to cope with AJAX style things, but that's already been linked to by Osiris. What's more, you probably shouldn't do this, even if you could. The URL tells the user where he/she is on your site. If you change it without changing the page contents, it's becomes a little confusing.