736

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.

5
  • 3
    @tobiaskienzler When that question was originally asked back in 2009, it was not possible. Aug 24, 2016 at 11:34
  • 8
    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 Aug 24, 2016 at 11:45
  • @tobiaskienzler, the other question doesn't have an outdated accepted answer. Aug 24, 2016 at 11:48
  • 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... Aug 24, 2016 at 11:56
  • 3
    @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. Dec 24, 2016 at 9:43

4 Answers 4

985

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.

8
  • 3
    Ah, the functionality is in WebKit and landed a few months ago <bugs.webkit.org/show_bug.cgi?id=36152>. Nice find! Jul 27, 2010 at 1:46
  • This can now be done in Chrome, Safari, FF4+, and IE10pp3+! (From David Murdoch's answer to stackoverflow.com/questions/824349/… ) Dec 19, 2011 at 17:48
  • 15
    Protip: you can use relative paths with these functions as well (e.g. ../new-url or ../../new-url. They seem to do what you would expect in Chrome at least.
    – Mahn
    Aug 3, 2013 at 9:29
  • 6
    I'd like to add that window.replaceState is much easier to set up and often preferable, e.g. when you want to update the URL after the user changes the value of some dropdown or search field. If you want to use pushState, then you also need to properly support onpopstate event.
    – Kos
    Jul 31, 2016 at 8:06
  • 1
    @fwzard state. The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object. The state object can be anything that can be serialized. So it's actually more than just "object or string". Docs: developer.mozilla.org/en-US/docs/Web/API/History/pushState Mar 25, 2020 at 22:11
198

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!

6
  • 20
    replaceState was exactly what I needed, thanks for expanding on original response. Sep 21, 2016 at 23:07
  • 1
    'the domain and protocol must be the same as original!' this prevent some fishing site to change the address bar url.
    – Rick
    Sep 26, 2017 at 10:49
  • 3
    You should not pass an absolute URL to this function. If you do, you most likely need to build it dynamically from the current scheme, host, and port - which is a lot of work when you could just make it a relative URL ("foo.html" or even "/foo.html") and let the browser take care of it. Jun 17, 2018 at 5:20
  • 1
    @DimeCadmium nice simplification. Updated.
    – Pawel
    Jun 17, 2018 at 20:02
  • history.replaceState add to history in ff 66.0b1
    – azzamsa
    Jan 25, 2019 at 18:09
37

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

if (history.pushState) {
  window.history.pushState(stateObj, "title", "url");
} else {
  window.history.replaceState(stateObj, "title**", 'url');
  // ** It seems that current browsers other than Safari don't support pushState
  // title attribute. We can achieve the same thing by setting it in JS.
  document.title = "Title";
}

stateObj

The state object is a JavaScript object which is associated with the history entry passed to the replaceState method. The state object can be null.

title

Most browsers currently ignore this parameter, although they may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state.

url Optional

The URL of the history entry. The new URL must be of the same origin as the current URL; otherwise replaceState throws an exception.

2
  • 25
    document.location.href reloads the page
    – paullb
    Jul 29, 2017 at 5:29
  • 1
    Umm, i see the compatibility in caniuse (pushstate and replacestate), both are same, it's not support old browser May 18, 2022 at 18:13
18
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);
3
  • 11
    While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
    – Maximouse
    Mar 3, 2020 at 18:03
  • @MaxiMouse thanks for your sugerence, i will take it in mind. Apr 19, 2020 at 2:39
  • 4
    Suggested edit: const url = new URL(window.location); url.searchParams.set('foo', 'bar'); window.history.pushState({}, '', url);
    – user3579536
    Nov 15, 2020 at 17:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.