Updating address bar with new URL without hash or reloading the page
我或者梦见chrome(dev channel)实现了一种通过javascript(路径,而不是域)更新地址栏的方法,而不需要重新加载页面,或者他们真的做到了这一点。
但是,我找不到我认为我读过的那篇文章。
我疯了还是有办法(铬合金)?
另外,我不是在说window.location.hash等。如果上述情况存在,这个问题的答案将是不真实的。
- 在不重新加载页面的情况下修改URL的可能副本
- @Tobiaskienzler在2009年最初被问到这个问题时,这是不可能的。
- 当然不是。但现在,问题也是一样的。可惜的是,另一个回答已经过时了(你,我注意到了)。你知道吗?让我们用另一种方式来结束,没有人说"原版"必须是旧的,事实上有先例。
- @另一个问题没有过时的公认答案。
- 好吧,不过时,但更复杂。尽管如此,这两个问题对我来说确实是一样的,但也许我遗漏了一个细微的差别…
- @托比亚斯基纳,这是一个6年前的问题,为什么你要为这个问题费心?只需享受令人惊叹的答案,并在您的应用程序中实现它。6年来,成千上万的用户同意这是一个令人惊奇的问题,请保持原样。
现在您可以在大多数"现代"浏览器中执行此操作!
这是我阅读的原始文章(发表于2010年7月10日):HTML5:在不刷新页面的情况下更改浏览器URL。
要更深入地了解pushstate/replacestate/popstate(也称为HTML5历史API),请参阅MDN文档。
tl;dr,您可以这样做:
1
| window.history.pushState("object or string","Title","/new-url"); |
请参阅我的答案,在不重新加载页面的情况下修改URL,了解基本操作方法。
- 啊,功能在webkit中,几个月前登陆了
- 现在由GitHub使用,而树导航
- @是的。他们偶尔会把我的背扣弄断。
- 现在可以在chrome、safari、ff4+和ie10pp3+中完成!(摘自大卫·默多克对stackoverflow.com/questions/824349/hellip;的回答)
- IE9及以下版本呢?有类似的解决方案吗?
- 那里有各种各样的history黑客。有关更多信息,请参阅此问题:stackoverflow.com/questions/2358928/…
- 能够存储与历史相关的物品也是非常棒的!
- Protip:您也可以使用具有这些功能的相对路径(例如,../new-url或../../new-url。至少在铬合金中,它们看起来像你期望的那样。
- 我想补充一点,window.replaceState更容易设置,而且通常更可取,例如,当用户更改某个下拉或搜索字段的值后,希望更新URL时。如果您想使用pushState,那么您还需要适当地支持onpopstate事件。
只更改哈希后的内容-旧浏览器
1
| document.location.hash = 'lookAtMeNow'; |
正在更改完整的URL。Chrome、火狐、IE10+
1
| history.pushState('data to be passed', 'Title of the page', '/test'); |
上面将向历史记录中添加一个新条目,以便您可以按"上一步"按钮转到上一个状态。若要在不向历史记录添加新条目的情况下就地更改URL,请使用
1
| history.replaceState('data to be passed', 'Title of the page', '/test'); |
尝试在控制台中运行这些程序!
- 我需要的正是replaceState,感谢扩大最初的反应。
- '域和协议必须与原始的相同!'这样可以防止某些钓鱼网站更改地址栏URL。
- 不应向此函数传递绝对URL。如果这样做,您很可能需要从当前的方案、主机和端口动态地构建它——当您可以将其设置为相对的URL("foo.html"或甚至是"/foo.html")并让浏览器来处理时,这是一项很大的工作。
- @dimecadmium很好的简化。更新。
- history.replaceState在FF 66.0B1中增加了历史记录
更新到davids答案,即使检测浏览器也不支持pushstate:
1 2 3 4 5
| if (history.pushState) {
window.history.pushState("object or string","Title","/new-url");
} else {
document.location.href="/new-url";
} |
- document.location.href重新加载页面
- @paulb对于旧浏览器来说,这是一种回退,如果不重新加载,就不支持任何方式。