使用新 URL 更新地址栏（不带哈希值）或重新加载页面 [duplicate]

您现在可以在大多数“现代”浏览器中执行此操作！

这是我读到的原始文章（发布于 2010 年 7 月 10 日）：HTML5：在不刷新页面的情况下更改浏览器 URL。

要更深入地了解 pushState/replaceState/popstate（又名 HTML5 历史 API），请参阅 MDN 文档。

TL的;DR，您可以执行以下操作：

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

请参阅我的回答 在不重新加载页面的情况下修改 URL，了解基本操作方法。

仅更改哈希之后的内容 - 旧浏览器

document.location.hash = 'lookAtMeNow';

更改完整 URL。Chrome、Firefox、IE10+

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

上面将在历史记录中添加一个新条目，因此您可以按“返回”按钮转到以前的状态。若要更改原位 URL，而不向历史记录添加新条目，请使用

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

立即尝试在控制台中运行这些！

更新了 Davids 答案，甚至可以检测不支持 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";
}

状态Obj

state 对象是一个 JavaScript 对象，它与传递给 replaceState 方法的历史记录条目相关联。state 对象可以为 null。

标题

大多数浏览器目前都忽略了这个参数，尽管它们将来可能会使用它。在此处传递空字符串应该是安全的，不会将来对方法进行更改。或者，您可以传递该州的简短头衔。

url 可选

历史记录条目的 URL。新 URL 必须与当前 URL 的来源相同;否则 replaceState 将引发异常。

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