javascript – Updating address bar with new URL without hash or reloading the page

The Question :

674 people think this question is useful

I either dreamt about chrome (dev channel) implementing a way to update the address bar via javascript (the path, not domain) without reloading the page or they really have done this.

However, I can’t find the article I think I read.

Am I crazy or is there a way to do this (in Chrome)?

p.s. I’m not talking about window.location.hash, et al. If the above exists the answer to this question will be untrue.

The Question Comments :
  • @tobiaskienzler When that question was originally asked back in 2009, it was not possible.
  • Of course not. But now it is, the questions ask for the same. A shame though that the other one has an outdated answer accepted (by you, I noticed)… You know what? Let’s dupe-close the other way around, no-one said the “original” has to be the older one, in fact there are precedents
  • @tobiaskienzler, the other question doesn’t have an outdated accepted answer.
  • ok, not outdated, but more complicated. Still, the two questions do appear to be pretty much the same to me, but maybe I’m missing a nuance here…
  • @TobiasKienzler it’s a 6 years old question, why you have to bother with this question? Just enjoy the amazing answer and implement it on your application. For 6 years thousands of SO users agreed that it’s an amazing questions, please leave it as it is.

The Answer 1

905 people think this answer is useful

You can now do this in most “modern” browsers!

Here is the original article I read (posted July 10, 2010): HTML5: Changing the browser-URL without refreshing page.

For a more in-depth look into pushState/replaceState/popstate (aka the HTML5 History API) see the MDN docs.

TL;DR, you can do this:

window.history.pushState("object or string", "Title", "/new-url");

See my answer to Modify the URL without reloading the page for a basic how-to.

The Answer 2

168 people think this answer is useful

Changing only what’s after hash – old browsers

document.location.hash = 'lookAtMeNow';

Changing full URL. Chrome, Firefox, IE10+

history.pushState('data to be passed', 'Title of the page', '/test');

The above will add a new entry to the history so you can press Back button to go to the previous state. To change the URL in place without adding a new entry to history use

history.replaceState('data to be passed', 'Title of the page', '/test');

Try running these in the console now!

The Answer 3

35 people think this answer is useful

Update to Davids answer to even detect browsers that do not support pushstate:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}

The Answer 4

6 people think this answer is useful
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);

Add a Comment