当我包含一个指向页面内某部分的链接时,点击该链接不会修改浏览器历史记录。点击“返回”按钮时,会直接离开当前页面,而不是回到链接定义所在的页面位置。
编辑:在这个 Discourse 论坛上,我无法创建带有 ID 的元素,因此无法在此演示。这里的源代码是我想要实现的效果——但这仅用于说明,并不影响我问题的核心:
<div id="link-target"></div>
*此部分由上方链接指向。此处无内容。*
当我包含一个指向页面内某部分的链接时,点击该链接不会修改浏览器历史记录。点击“返回”按钮时,会直接离开当前页面,而不是回到链接定义所在的页面位置。
编辑:在这个 Discourse 论坛上,我无法创建带有 ID 的元素,因此无法在此演示。这里的源代码是我想要实现的效果——但这仅用于说明,并不影响我问题的核心:
<div id="link-target"></div>
*此部分由上方链接指向。此处无内容。*
这在一定程度上是预期的。如果你点击同一主题中另一篇帖子的链接,它也不会被推入历史记录,而且这是一个不带片段标识的完整链接,因此我们从未将主题内的导航推入历史记录。
我觉得这种行为非常出乎意料 ![]()
这是一个不含 JavaScript 的示例页面。在 Chromium 浏览器中,点击该链接会跳转到页面底部;点击“返回”则会回到你之前点击的位置。这是所有未吞噬此类历史记录的其他网站都会出现的预期行为。
<a href="#target">link</a>
<div style="height:2000px"></div>
<div id="target">Hello</div>
这是一个该行为存在问题的示例:
https://meta.discourse.org/tos
如果您点击任意目录链接,然后尝试通过浏览器历史记录返回起点,这是无法实现的。
既然如此,最初提供目录的意义何在?
对于那些希望支持标准浏览器导航的网站,有什么建议吗?
我正在研究可能与此相关的“滚动到元素”行为的猴子补丁(monkeypatching),但我对代码库几乎一无所知
我最终会解决的,但如果有人能提供一些指引,我将不胜感激!
直到你指出来,我才意识到这一直困扰着我。我经常想回到在 Discourse 中点击链接的位置,结果却跳到了之前的页面。这非常令人恼火。我一直把这归咎于 iOS 应用(因为我几乎用它处理所有 Discourse 相关事务)和用户操作失误的综合作用。
这个目录组件做得非常出色,我们在每个文档页面都在使用它,非常感激为此付出的努力!
不过,导航问题依然存在。点击目录中的链接不会修改浏览器历史记录,因此点击“返回”按钮会直接离开当前页面。
这确实是个问题。@Johani,如果能修复就好了,但我感觉这非常复杂。也许我们可以在点击目录链接时调用 pushstate。
我通过一个主题组件实现了一种变通方案(从 Discourse 对链接导航的立场来看,这或许是一种恰当的自定义网站方法)。该方案遵循 DiscoTOC 所使用的模式:在帖子中添加一个标记以触发相应行为。相关代码见此处。
我认为修改 DiscoTOC 以使用 URL 片段和浏览器历史记录是一个好主意。但这需要改变该组件的导航方式,并非小改动。DiscoTOC 目前使用数据属性来传递目标,而非链接的 href 属性,且未尝试在浏览器 URL(window.location)中反映新的页面位置。
我认为上述我使用的模式或许适用于 DiscoTOC,但鉴于该组件当前的实现方式,这将带来更广泛的影响。
我认为在这种情况下应使用 pushState。目标是实现返回上一位置的功能,这需要向历史记录中推送一个条目,因为事件已被阻止。
这就是为什么过去在每个(以此为例)服务条款条目底部会有小小的“返回顶部”链接……![]()