使用新 URL 更新地址栏而不使用哈希或重新加载页面 [重复]

Posted 2023-03-05

【中文标题】使用新 URL 更新地址栏而不使用哈希或重新加载页面 [重复]

【英文标题】：Updating address bar with new URL without hash or reloading the page [duplicate]

【发布时间】：2011-03-21 07:11:22

【问题描述】：

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

但是，我找不到我认为读过的文章。

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

附言我不是在谈论 window.location.hash 等。如果上述存在the answer to this question 将是不真实的。

【问题讨论】：

@tobiaskienzler 当这个问题最初是在 2009 年被问到时，这是不可能的。

当然不是。但现在是，questions 要求相同。可惜对方接受了一个过时的答案（你，我注意到了）......你知道吗？让我们反过来说，没有人说“原始”必须是旧的，实际上有先例

@tobiaskienzler，另一个问题没有过时的公认答案。

好的，没有过时，但更复杂。尽管如此，这两个问题在我看来确实几乎相同，但也许我在这里遗漏了细微差别......

@TobiasKienzler 这是一个已有 6 年历史的问题，您为什么要为这个问题烦恼？只需享受惊人的答案并将其实施到您的应用程序中即可。 6 年来，成千上万的 SO 用户一致认为这是一个了不起的问题，请保持原样。

【参考方案1】：

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

这是我阅读的原始文章（2010 年 7 月 10 日发布）：html5: Changing the browser-URL without refreshing page。

如需更深入地了解 pushState/replaceState/popstate（又名 HTML5 History API）see the MDN docs。

TL;DR，你可以这样做：

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

请参阅我对Modify the URL without reloading the page 的回答，了解基本操作方法。

【讨论】：

啊，这个功能在 WebKit 中并在几个月前登陆 bugs.webkit.org/show_bug.cgi?id=36152>。很好的发现！

这个现在被github使用了，而树形导航

@Vprimachenko：是的。他们每隔一段时间就会打破我的后退按钮。

Protip：您也可以在这些函数中使用相对路径（例如 ../new-url 或 ../../new-url。它们似乎至少在 Chrome 中符合您的预期。

我想补充一点，window.replaceState 更容易设置并且通常更可取，例如当您想在用户更改某些下拉列表或搜索字段的值后更新 URL 时。如果要使用pushState，那么还需要适当支持onpopstate事件。

【参考方案2】：

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

document.location.hash = 'lookAtMeNow';

更改完整网址。 Chrome、火狐、IE10+

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

以上将在历史记录中添加一个新条目，因此您可以按“返回”按钮返回上一个状态。要在不向历史添加新条目的情况下更改 URL，请使用

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

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

【讨论】：

replaceState 正是我所需要的，感谢您扩展原始回复。

'域名和协议必须和原来的一样！'这可以防止某些钓鱼网站更改地址栏网址。

您不应将绝对 URL 传递给此函数。如果这样做，您很可能需要从当前方案、主机和端口动态构建它——当您可以将其设为相对 URL（“foo.html”甚至“/foo.html ") 并让浏览器处理它。

@DimeCadmium 很好的简化。已更新。

history.replaceState 添加到 ff 66.0b1 中的历史记录

【参考方案3】：

更新 Davids 的答案，甚至可以检测不支持 pushstate 的浏览器：

if (history.pushState) 
  window.history.pushState("object or string", "Title", "/new-url");
 else 
  document.location.href = "/new-url";

【讨论】：

document.location.href 重新加载页面

【参考方案4】：

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

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

@MaxiMouse 感谢您的支持，我会记住的。

建议编辑： const url = new URL(window.location); url.searchParams.set('foo', 'bar'); window.history.pushState(, '', url);