How do I modify the URL without reloading the page?

Problem

Is there a way to change the current page’s URL without having to reload it?

If feasible, I’d like to get to the part before the # hash.

It’s not like I’m breaking any cross-domain regulations because I simply need to update the portion after the domain.

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads

Asked by Robin Rodricks

Solution #1

Chrome, Safari, Firefox 4+, and Internet Explorer 10pp4+ can now accomplish this!

For further details, see the solution to this question: Adding a new URL to the address bar without using a hash or restarting the page

Example:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

The back/forward button navigation can then be detected using window.onpopstate:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

See this MDN article for a more in-depth look at modifying browser history.

Answered by David Murdoch

Solution #2

HTML5 was the first to introduce the concept of history. The history.pushState() and history.replaceState() functions, respectively, allow you to add and edit history entries.

window.history.pushState('page2', 'Title', '/page2.php');

More information can be found here.

Answered by Vivart

Solution #3

If you want to update the url without adding it to the browser history, you can use HTML5 replaceState:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

The back button’s functioning would be ‘broken’ as a result of this. This may be necessary in some cases, such as an image gallery (where you want the back button to return to the gallery index page rather than navigating back through each image you watched) while giving each image its own unique url.

Answered by George Filippakos

Solution #4

Here’s how I solved it (newUrl is the new URL you want to replace the current one):

history.pushState({}, null, newUrl);

Answered by Haimei

Solution #5

NOTE: If you’re using an HTML5 browser, you should disregard this response. As can be seen from the other responses, this is now achievable.

There is no method to change the URL without reloading the page in the browser. The URL refers to the last page that was loaded. It will reload the page if you alter it (document.location).

You create a site on www.mysite.com that looks like a bank login page, for example. Then you update the URL bar in your browser to www.mybank.com. The user will be completely ignorant that they are visiting www.mysite.com.

Answered by Robin Day

Post is based on https://stackoverflow.com/questions/824349/how-do-i-modify-the-url-without-reloading-the-page