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

JavascriptAjaxGoogle Chrome

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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!

Solution 3 - Javascript

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.

Solution 4 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDavid MurdochView Question on Stackoverflow
Solution 1 - JavascriptDavid MurdochView Answer on Stackoverflow
Solution 2 - JavascriptPawelView Answer on Stackoverflow
Solution 3 - JavascriptmetamagikumView Answer on Stackoverflow
Solution 4 - JavascriptKevin MendezView Answer on Stackoverflow