什么是URL中的#符号？

Question

我去了一个照片分享网站，当我点击照片时，它直接将我重定向到一个类似于www.example.com/photoshare.php?photoid=1234445的URL。当我在该页面中单击其他照片时，URL变为www.example.com/photoshare.php?photoid=1234445＃3338901。如果我在同一页中点击其他照片，则只更改＃后面的数字。与漂亮的相片相同，例如 www.example.com/photoshare.php?album=holiday#!prettyPhoto[gallery2]/2/ ，我认为它们使用了ajax，因为整个页面似乎没有加载，但是URL已更改。

- smith

Answer 1

URL中跟在#后面的部分是片段标识符。它与URL的其余部分不同。记住的关键是“仅客户端”（当然，客户端可以选择将其发送到服务器...但不作为片段标识符）：

片段标识符与URI的其余部分不同：即它的处理完全由客户端处理，服务器不参与 - 当然，服务器通常帮助确定MIME类型，而MIME类型决定了片段的处理方式。当代理（如Web浏览器）从Web服务器请求资源时，代理将URI发送到服务器，但不发送片段。相反，代理等待服务器发送资源，然后根据文档类型和片段值处理资源。

这可用于导航到“锚点”链接，例如：http://en.wikipedia.org/wiki/Fragment_identifier#Basics（注意它如何进入“基础知识”部分）。

虽然过去只用于访问“锚点”，但现在它被用于在许多JavaScript驱动的站点中存储可导航状态 - 例如gmail大量使用它。并且，就像这里的情况一样，还有一些“photoshare”JavaScript也利用片段标识符进行状态/导航。

因此，正如我们所猜测的那样，JavaScript“捕获”片段（有时称为“哈希”）的变化并执行AJAX（或其他后台任务）以更新页面。当片段更改时，页面本身不会重新加载，因为URL仍然指向相同的服务器资源（即片段标识符之前的URL部分）。

新版本的浏览器支持onhashchange事件，但长期以来已经通过各种轮询技术支持了监视功能。

祝编码愉快。

- user166390

---

@smith onhashchange -- 当支持onhashchange时；-) 否则，请参考“跨浏览器”实现的源代码，例如jQuery hashchange插件。 - user166390

@smith # 是片段标识符的第一个字符。# 以及其后面的所有内容 都是片段标识符的一部分。Google 使用一种爬行方法，该方法利用以 #! 开头的特定片段--这是他们的惯例/方法（每个想要获得良好/正确索引的“交互式”站点的人都应该遵循它，Google 是“大狗”）。请参见 Chuck 的答案中的链接。 - user166390

Answer 2

它被称为片段标识符。它标识页面的“部分”。如果有一个元素的"name"或"id"属性等于片段文本，它将导致页面滚动到该元素。它们也被丰富的JavaScript应用程序用来引用应用程序的不同部分，尽管所有功能都位于单个HTML页面上。

最近，你经常会看到以“#!”开头的片段。虽然这些仍然只是以!字符开头的片段，但这种格式被Google指定用于帮助这些AJAX伪页面可爬行。

- Chuck

---

所以 #! 和 #? 是一样的，你能展示一下 JavaScript 如何与它一起工作吗，就像他们为照片做的那样？谢谢！ - smith

Answer 3

在URL（以及其他地方）中，“＃”符号称为哈希，跟在哈希后面的叫做片段。使用JavaScript，您可以访问片段并使用其内容。

例如，大多数浏览器实现了“onhashchange”事件，在哈希更改时触发。使用JavaScript，您还可以从“location.hash”访问哈希。例如，对于像“http://something.com#somethingelse”的URL。

var frag = location.hash.substr(1);
console.log(frag);

这将在控制台打印出'somethingelse'。如果我们不使用substr来删除第一个字符，frag将是：'#somethingelse'。

此外，当您导航到带有哈希标记的URL时，浏览器会尝试滚动到具有与片段相对应的id元素。 http://en.wikipedia.org/wiki/Fragment_identifier

- whg

---

你所称之为“hashtag”的东西，正确的术语应该是“fragment”。 - Ignacio Vazquez-Abrams

那么如何使用JavaScript访问片段呢？你能给我展示一个例子吗？ - smith

Answer 4

这是锚点链接的名称属性：http://www.w3schools.com/HTML/html_links.asp。它用于在HTML页面内部创建书签（不要与工具栏中的书签混淆）。在您的示例中，如果您使用URL中的#符号添加了书签，再次访问该书签时，它将显示您最后查看的图片，很可能是id为3338901的图片。请注意，保留HTML标记。

- Trevor

Answer 5

嘿，我用了类似这样的东西……简单但实用

       location.href = data.url.replace(/%2523/, '%23');

其中data.url是我的原始URL，它替换了我的URL中的#符号。

- Sachin9