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

IT技术 javascript ajax google-chrome
2021-01-15 01:47:04

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

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

我疯了还是有办法做到这一点(在 Chrome 中)?

ps 我不是在谈论 window.location.hash 等。如果上述情况存在,那么这个问题的答案将是不真实的。

4个回答

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

这是我阅读的原始文章(2010 年 7 月 10 日发布):HTML5:在不刷新页面的情况下更改浏览器 URL

要更深入地了解 pushState/replaceState/popstate(又名 HTML5 History API),请参阅 MDN 文档

TL; DR,你可以这样做:

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

有关基本操作方法,请参阅我在不重新加载页面的情况下修改 URL 的答案

提示:您也可以对这些函数使用相对路径(例如../new-url../../new-url。它们似乎至少可以在 Chrome 中执行您期望的操作。
2021-03-15 01:47:04
这现在由 github 使用,而树导航
2021-03-22 01:47:04
我想补充一点,window.replaceState它更容易设置并且通常更可取,例如,当您想在用户更改某些下拉或搜索字段的值后更新 URL 时。如果您想使用pushState,那么您还需要正确支持onpopstate事件。
2021-03-27 01:47:04
@Vprimachenko:是的。他们每隔一段时间就会打破我的后退按钮。
2021-04-05 01:47:04
啊,这个功能在 WebKit 中,几个月前登陆 < bugs.webkit.org/show_bug.cgi?id=36152 >。不错的发现!
2021-04-09 01:47:04

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

document.location.hash = 'lookAtMeNow';

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

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

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

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

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

'域和协议必须与原始相同!这可以防止某些钓鱼网站更改地址栏 url。
2021-03-17 01:47:04
@DimeCadmium 很好的简化。更新。
2021-03-17 01:47:04
您不应向此函数传递绝对 URL。如果这样做,您很可能需要根据当前方案、主机和端口动态构建它 - 当您可以将其设置为相对 URL(“foo.html”甚至“/foo.html”)时,这是一项大量工作") 并让浏览器处理它。
2021-03-18 01:47:04
history.replaceState 在 ff 66.0b1 中添加到历史记录
2021-03-20 01:47:04
replaceState 正是我所需要的,感谢您扩展原始回复。
2021-03-29 01:47:04

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

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}
document.location.href 重新加载页面
2021-03-29 01:47:04
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);
虽然此代码片段可能会解决问题,但包括解释确实有助于提高帖子的质量。请记住,您是在为将来的读者回答问题,而那些人可能不知道您提出代码建议的原因。
2021-03-16 01:47:04
建议编辑:const url = new URL(window.location); url.searchParams.set('foo', 'bar'); window.history.pushState({}, '', url);
2021-03-25 01:47:04
@MaxiMouse 感谢您的支持,我会记住的。
2021-03-29 01:47:04