浏览器如何处理带有片段标识符的 URL答案

【问题标题】：How do browsers handle URLs with a fragment identifier浏览器如何处理带有片段标识符的 URL
【发布时间】：2016-04-28 17:13:39
【问题描述】：

我遇到了一种情况，我想确定浏览器如何处理包含片段标识符的 URI，例如 Products#A。想象一下我的网站有两个页面：Products 和 FAQs。然后，在每个我想使用 # 导航到特定的 HTML 元素。所以：

如果我已经在页面 Products 中，href="Products#A" 和 href="#A" 有什么区别？
如果我在页面FAQs？
在href="Products#A" 中放置 URL 是否总是会触发服务器调用，或者浏览器是否知道它已经在页面 Products 上并且它不会进行服务器调用？
什么是我添加/（如href="/products#A"）？这会强制服务器调用吗？
此标准适用于所有浏览器吗？

我已经进行了一些测试，但这里缺少一些理论。

【问题讨论】：

【解决方案1】：

如果链接（片段除外）解析为与当前页面相同的 URL，则它将在当前页面中导航。

如果它解析到不同的页面，那么它将加载一个新页面。

相对（或绝对）URL 的实际表达方式并不重要，重要的是它解析为什么。

【讨论】：

当您说如果它解析为与当前页面相同的 URL，它将导航到当前页面，您的意思是它不会进行服务器调用，对吗？如果是这样，为什么（至少在我的测试中）当我没有互联网连接时它不起作用？我以为它只会导航到该页面中已经加载的#...这就是为什么这个问题看起来很简单，但我认为它并不那么简单。

【解决方案2】：

为了回答你的问题，我是根据自己的经验来做这些的。

如果我已经在页面 Products 中，href="Products#A" 和 href="#A" 有什么区别？

什么都没有。只是为了安全起见，如果您在不同的页面中，并且内容使用相同的部分（或相同的来源）呈现，这可能会有所帮助。
如果我在页面FAQs？

它正常导航到Products，找到id="A"的元素并滚动到那里。
在href="Products#A" 中放置一个 URL 是否总是会触发服务器调用，或者浏览器是否知道它已经在页面 Products 上并且它不进行服务器调用？

这是一个客户端调用，不会对 URL 片段进行服务器调用。
这个标准适用于所有浏览器吗？

我相信是的。

【讨论】：

我刚刚添加了第 4 个问题。它会强制服务器调用吗？
@PauloJaneiro 如果链接在缓存中过期和/或页面不是Products，它会强制服务器调用。这清楚了吗？
好的，但是就像我在对 Quentin 的评论中所说的那样，您可以在 www.nutriner.com 上看到，当您进一步导航主页然后使用菜单中的链接导航到其他虚拟没有互联网连接的页面（使用#）不显示。他们应该（因为你已经加载了 main.html）！
@PauloJaneiro 它们是使用 AJAX 好友加载的。
Praveen，感谢您的支持，但实际上并非如此。我在服务器端使用 Phoenixframework 和零客户端框架/Ajax 制作它们。一切都是纯 CSS 技巧和我制作的简单路由器。这就是为什么我也对这个问题感到惊讶，因为它应该非常简单，因为该网站只有两个页面：'index' 和 'main' 并且以不同的方式编写 URL（main.html# 与 #）会导致不同的结果.可能是我操纵“window.location.hash”的方式，但这也很奇怪。还是非常感谢！