Javascript 使用新URL更新地址栏，无需散列或重新加载页面

我或者梦见chrome（开发频道）实现了一种通过javascript（路径，而不是域）更新地址栏而不重新加载页面的方法，或者他们真的做到了这一点

然而，我找不到我认为我读过的那篇文章

我疯了还是有办法做到这一点（用Chrome）

---

p、 我不是在说window.location.hash等。如果上述内容存在，那将是不真实的。

您现在可以在大多数“现代”浏览器中这样做了

这是我读到的原始文章（发布于2010年7月10日）：

更深入地了解pushState/replaceState/popstate（又称HTML5历史API）

TL；博士，你可以这样做：

window.history.pushState("object or string", "Title", "/new-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("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}

---

---

啊，这个功能在WebKit中，几个月前登陆。好发现！github现在使用它，而treenavigation@Vprimachenko：是的。他们每隔一段时间就会打断我的后退按钮。Protip：你也可以在这些函数中使用相对路径（例如，

。/new-url

或

。/../new-url

。它们似乎至少在Chrome中实现了您所期望的功能。我想添加

窗口。replaceState

更易于设置，通常更可取，例如，当用户更改某个下拉列表或搜索字段的值后，您想要更新url时。如果您想使用

pushState

，那么您还需要适当地支持

onpopstate

事件。@tobiaskienzler当这个问题在2009年最初被问到时，是不可能的。当然不可能。但现在是了，这些问题要求的是相同的。遗憾的是，另一个问题的答案已经过时了（我注意到，你已经接受了）…你知道吗？让我们从另一个方向靠近，没人说“原版”必须是旧的，事实上有precedents@tobiaskienzler，另一个问题没有过时的公认答案。好吧，不是过时的，但更复杂。尽管如此，这两个问题对我来说似乎几乎一样，但也许我在这里遗漏了一个细微的差别…@TobiasKienzler这是一个6岁的问题，你为什么要费心思考h这个问题？请享受这个令人惊奇的答案，并在您的应用程序上实现它。6年来，成千上万的用户都认为这是一个令人惊奇的问题，请保持原样。

replaceState

正是我所需要的，感谢您扩展了原始响应。“域和协议必须与原始的相同！”这是如此我需要一个钓鱼网站来更改地址栏url。你不应该将绝对url传递给此函数。如果你这样做，你很可能需要从当前方案、主机和端口动态构建它-如果你只需要将其设置为一个相对url（“foo.html”甚至“/foo.html”），这将是一项艰巨的工作让浏览器来处理它。@code.Updated.

history.replaceState

add to history in ff 66.0b1document.location.href重新加载页面。虽然此代码片段可能会解决问题，但确实有助于提高您文章的质量。请记住，您将在将来回答读者的问题，而且那些人可能不知道你的代码建议的原因。@MaxiMouse谢谢你的建议，我会记住的。建议的编辑：const url=new url（window.location）；url.searchParams.set（'foo'，'bar'）；window.history.pushState（{}'，url）；

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