Facebook和新的Twitter URL中的sheband/hashband（#！）是什么？

我刚刚注意到，我们现在习惯的长而复杂的Facebook URL看起来像这样：

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

据我所知，今年早些时候，它只是一个普通的类似URL片段的字符串（以#开头），没有感叹号。但现在它是一个sheang或hashang（#!），我以前只在shell脚本和Perl脚本中见过。

新的twitter URL现在还具有#!符号。例如，Twitter个人资料URL现在如下所示：

http://twitter.com/#!/BoltClock

#!现在是否在URL中扮演了一些特殊的角色，比如某个Ajax框架或其他什么，因为新的Facebook和Twitter界面现在基本上是Ajax化的？
在我的URL中使用它会以任何方式使我的Web应用程序受益吗？

117711 次浏览
小开
最佳答案

此技术是，现已弃用

这个用来告诉Google如何索引页面。

https://developers.google.com/webmasters/ajax-crawling/

这种技术大部分已经被使用与HTML5一起引入的JavaScript History API的能力所取代。对于像www.example.com/ajax.html#!key=value这样的URL，Google将检查URLwww.example.com/ajax.html?_escaped_fragment_=key=value以获取内容的非AJAX版本。

小开

八角/数字符号/hashmark在URL中具有特殊意义，它通常标识文档部分的名称。准确的术语是哈希后面的文本是URL的锚部分。如果您使用维基百科，您会看到大多数页面都有目录，您可以使用锚点跳转到文档中的部分，例如：

https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turing标识页面，Early_computers_and_the_Turing_test是锚点。Facebook和其他Javascript驱动的应用程序（比如我自己的木头和石头）使用锚点的原因是它们希望使页面可书签（正如对该答案的评论所建议的那样）或支持后退按钮无需从服务器重新加载整个页面。

为了支持书签和后退按钮，您需要更改URL。但是，如果您将页面部分（例如window.location = 'http://raganwald.com';）更改为不同的URL或没有指定锚点，浏览器将从URL加载整个页面。在Firebug或Safari的Javascript控制台中尝试此操作。加载http://minimal-github.gilesb.com/raganwald。现在在Javascript控制台中，键入：

window.location = 'http://minimal-github.gilesb.com/raganwald';

您将看到来自服务器的页面刷新。现在键入：

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

啊哈！没有页面刷新！类型：

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

仍然没有刷新。使用后退按钮查看这些URL是否在浏览器历史记录中。浏览器注意到我们在同一个页面上，但只是更改了锚点，所以它不会重新加载。由于这种行为，我们可以有一个Javascript应用程序，在浏览器看来它在一个“页面”上，但有许多与后退按钮相关的可书签部分。当用户输入不同的“状态”时，应用程序必须更改锚点，同样，如果用户使用后退按钮、书签或链接加载包含锚点的应用程序，应用程序必须恢复适当的状态。

所以你有了它：Anchors为Javascript程序员提供了一种制作可书签、可索引和后退按钮友好的应用程序的机制。这种技术有一个名字：它是一个单页界面。

附言：这种技术还有第四个好处：通过AJAX加载页面内容，然后将其注入当前DOM可能比加载新页面快得多。除了速度提高之外，还可以在程序员的控制下执行进一步的技巧，例如在后台加载某些部分。

p. p. s.鉴于所有这些，“砰”或感叹号是对Google网络爬虫的进一步暗示，即完全相同的页面可以以略微不同的URL从服务器加载。参见Ajax爬行。另一种技术是使每个链接指向服务器可访问的URL，然后使用不显眼的Javascript将其更改为带有锚点的SPI。

这里是关键链接：单页界面宣言

小开

我一直认为!只是表示后面的哈希片段对应于一个URL，!代替了站点根目录或域。理论上，它可以是任何东西，但似乎Google AJAX Crawling API喜欢这样。

哈希，当然，只是表明没有真正的页面重新加载发生，所以是的，它用于AJAX目的。

小开

首先，我是Raganwald引用的单页界面宣言的作者

正如raganwald很好地解释的那样，Facebook和Twitter中使用的单页界面（SPI）方法的最重要方面是在URL中使用哈希#

字符!仅用于Google目的，此符号是Google的“标准”，用于抓取AJAX上密集的网站（在极端的单页界面网站中）。当Google的爬虫找到带有#!的URL时，它知道存在提供相同页面“状态”的替代传统URL，但在这种情况下是加载时间。

尽管#!组合对于SEO非常有趣，仅由Google支持（据我所知），但通过一些JavaScript技巧，您可以构建与任何网络爬虫（Yahoo，必应…）兼容的SPI网站SEO。

SPI宣言和演示在哈希中不使用Google的!格式，这种符号可以很容易地添加，SPI抓取可以更容易（更新：现在！使用符号并与其他搜索引擎保持兼容）。

看看这个教程，是一个简单的ItsNat SPI网站的例子，但你可以为其他框架挑选一些想法，这个例子与任何网络爬虫的SEO兼容。

困难的问题是生成任何（或选择）“AJAX页面状态”作为SEO的纯超文本标记语言，在ItsNat中非常简单和自动，同一站点在同一时间基于SPI或页面进行SEO（或当JavaScript被禁用以进行可访问性时）。对于其他Web框架，您可以遵循双站点方法，一个站点基于SPI，另一个页面基于SEO，例如Twitter使用这种“双站点”技术。

小开

如果你正在考虑采用这个哈希邦约定，我会是非常小心。

一旦你哈希邦，你就不能回去了。这可能是最棘手的问题。Ben的帖子提出了一点，当pushState被更广泛地采用时，我们可以将hashBangs抛在脑后，回到传统的URL。嗯，事实是，你不能。早些时候我说过URL是永远的，它们被索引和存档，通常保存在周围。除此之外，很酷的URL不会改变。我们不想断开所有有价值的链接到我们的内容。如果你在任何时候都实现了哈希邦URL，那么想要在不破坏链接的情况下更改它们，你唯一能做的就是在你的域的根文档上运行一些JavaScript。永远。这绝不是暂时的，你被它困住了。

你真的很想使用pushState而不是hashBangs，因为让你的URL变得丑陋，可能会被破坏——永远——对哈希邦来说是一个巨大而永久的缺点。

小开

为了对这一切进行良好的跟进，Twitter-哈希邦URL和单页界面的先驱之一-承认从长远来看哈希邦系统很慢，他们实际上已经开始扭转决定并回到老派链接。

关于这个的文章在这里。


提交答案