Updating address bar with new URL without hash or reloading the page [duplicate]

694
votes

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.

4
javascriptajaxgoogle-chrome
@tobiaskienzler When that question was originally asked back in 2009, it was not possible. – David Murdoch
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 – Tobias Kienzler
@tobiaskienzler, the other question doesn't have an outdated accepted answer. – David Murdoch
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... – Tobias Kienzler
@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. – Imam Assidiqqi

4 Answers

928
votes

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.

178
votes

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!

36
votes

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";
}
9
votes
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);