移动设备上的 URL 哈希/锚点被剥离。如何阻止这种情况？

支持
1

在桌面端点击带有锚点的链接时，页面会滚动到相应位置。但在移动端（Android 上的 Firefox 和 Chrome）上，锚点会被从 URL 中移除，因此无法滚动到指定位置。

我的目标：

我们有一份较长的指南和常见问题解答文档，需要链接到各个标题。由于 Discourse 会移除 id 参数，我创建了一个简单的主题组件，该组件使用目标文档中的自定义数据属性，并监听 URL 中的锚点，以便滚动到具有匹配数据属性的元素。

它在桌面端可以正常工作！

然而在移动端，锚点似乎被移除了，导致进入目标页面时不会滚动到正确的元素。当然，对于长文档而言，移动端是最需要这种导航功能的场景。

我发现，由目录组件生成的锚点在新标签页中打开时是有效的。它们不会从 URL 中移除，浏览器也会滚动到正确的位置。

我该如何解决这个问题？

2

小更新……

有人建议改用查询参数。这些参数在移动端似乎不会被移除。但令人惊讶的是，在桌面端它们会被移除。

3

以下是一些相关的帖子，尽管它们没有解决 URL 被剥离的具体问题……

4

我不使用 Android，所以无法测试这一点，但我曾多次使用链接到标题的功能，它们在 iPhone 上运行良好。我很好奇，你为什么要使用 ID 锚点而不是直接链接到你想要的标题？

例如，这个链接对你有效吗？Cloudflare R2 配置

你能举个例子说明你的锚点链接长什么样吗？也许我误解了你的意图。

5

因为那些标题链接极其脆弱。你提供的那个链接看起来是这样的：

https://meta.discourse.org/t/-/148916#p-738234-cloudflare-r2-13

看到末尾的那个 -13 了吗？它之所以存在，是因为这是第十三个标题。一旦你在文档前面添加新的标题，这个链接就会失效。当然，如果你修改了标题的文本，它也会失效。

我所说的“失效”，是指目标文档发生变化。据我了解，这些锚点是在页面加载时动态生成的。所以，如果你使用的是目录（TOC）插件，修改文档就不是问题。

在我们的使用场景中，链接指向的是常见问题解答（FAQ）。因此，添加新问题/标题是很常见的。

但你说的没错，Discourse 似乎能够识别这些锚点的模式并允许它们通过。但如果不符合预期的模式，它们就会被移除。

它们只是普通的字母数字 ID。所以，如果我要为上面的例子创建锚点，我只会使用 cloudflare-r2。

6

像这样的方案对你来说可行吗？

<a name="cloudflare-r2"></a>
## Cloudflare R2 配置

这样可以将锚点与标题分开，你可以在 URL 末尾添加 #cloudflare-r2 来链接到它。

7

在我的测试中，Markdown 解析器会移除 name 属性。这是我遇到的第一个问题的根源。

然而，我在本主题中提出的问题是，即使我能让该锚点正常工作，在移动设备上 #cloudflare-r2 也会被移除。而在桌面设备上则不会。

8

啊，我明白了。是的，看起来富文本编辑器会移除这些内容，但 Markdown 编辑器不会……在富文本编辑器中，我认为你需要将其包裹在 div 中以保留 HTML

 <div><a name="x"></a></div>
9

我试过了。它仍然会被过滤掉。此外，我不能指望将来有人不使用 Markdown 编辑器。

我已在富文本编辑器中放置了上述 HTML 进行测试。让我们看看……

10

太好了！这两个方面都有效！而且在两个编辑器中都可以。

我还需要进行更多测试，尤其是在移动设备上。我会继续研究并反馈结果。

谢谢！