Facebook和新的Twitter URL中的shebang / hashbang（＃！）是什么？

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

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

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

在新的Twitter的网址，现在还采用了#!符号。例如，Twitter个人资料URL现在看起来像这样：

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

#!现在是否在URL中扮演某些特殊角色，例如对于某个Ajax框架或某些东西，因为新的Facebook和Twitter界面现在基本上已被Ajax化？
在URL中使用它会以任何方式使我的Web应用程序受益吗？

现在不推荐使用此技术。

这曾经告诉Google如何索引页面。

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

使用HTML5随附的JavaScript History API的功能已大大取代了该技术。对于类似的网址www.example.com/ajax.html#!key=value，Google会检查该网址www.example.com/ajax.html?_escaped_fragment_=key=value以获取非AJAX版本的内容。

octothorpe / number-sign / hashmark在URL中具有特殊的意义，它通常标识文档部分的名称。确切的术语是，哈希后面的文本是URL 的锚部分。如果您使用Wikipedia，则将看到大多数页面都有目录，您可以使用锚点跳到文档中的各个部分，例如：

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驱动的应用程序（例如我自己的Wood＆Stones）使用锚点的原因是，他们希望使页面具有书签功能（如对该答案的评论所建议）或支持后退按钮，而无需从服务器。

为了支持书签和后退按钮，您需要更改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应用程序，该应用程序在浏览器中似乎位于一个“页面”上，但是具有许多可标记书签的部分，这些部分遵循后退按钮。当用户输入不同的“状态”时，应用程序必须更改锚点；同样，如果用户使用后退按钮或书签或链接来加载包含锚点的应用程序，则应用程序必须恢复适当的状态。

这样就可以了：锚为Javascript程序员提供了一种使可添加书签，可索引和后退按钮友好的应用程序的机制。该技术有一个名称：它是一个单页界面。

ps该技术的第四个好处是：通过AJAX加载页面内容，然后将其注入到当前DOM中，比加载新页面要快得多。除了提高速度外，还可以在程序员的控制下执行其他技巧，例如在后台加载某些部分。

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

再次是关键链接：单页界面宣言

首先：我是raganwald引用的“单页界面宣言”的作者

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

!仅出于Google的目的添加了该字符，此符号是Google的“标准”，用于抓取大量使用AJAX的网站（在极端的Single Page Interface网站中）。当Google的搜寻器找到一个带有#!其的URL时，便知道存在一个替代的常规URL，该URL提供相同的页面“状态”，但在这种情况下是加载时间。

尽管#!结合起来对于SEO来说是非常有趣的，但仅受Google支持（据我所知），通过一些JavaScript技巧，您可以构建与任何Web爬网程序（Yahoo，Bing ...）兼容的SPI网站SEO。

SPI宣言和演示不使用Google的!哈希格式，可以轻松添加该表示法，并且SPI爬取甚至更容易（更新：现在使用！表示法，并且与其他搜索引擎兼容）。

看一下本教程，它是一个简单的ItsNat SPI网站的示例，但是您可以从其他框架中挑选一些想法，该示例与任何Web爬网程序都兼容SEO。

困难的问题是生成任何（或选定的）“ AJAX页面状态”作为SEO的纯HTML，在itsNat中非常容易且自动，同一站点同时基于SPI或页面基于SEO（或禁用JavaScript时）以获取辅助功能）。使用其他Web框架，您可以遵循双重站点方法，一个站点基于SPI，另一站点基于SEO，例如Twitter使用这种“双重站点”技术。

如果您正在考虑采用此hashbang约定，我将非常小心。

哈希爆炸后，您将无法返回。这可能是最棘手的问题。Ben的帖子提出了这样一个观点，即当pushState被更广泛地采用时，我们可以抛弃hashbang并返回到传统URL。好吧，事实是，你不能。之前我曾说过，URL是永远存在的，它们会被索引和归档，并且通常会被保留。除此之外，很酷的URL不会改变。我们不想断开自己与内容所有有价值的链接的连接。如果您在任何时候都实现了hashbang URL，那么想要更改它们而不破坏链接，唯一的方法是在域的根文档上运行一些JavaScript。永远。这绝不是临时的，您会受其困扰。

您真的想使用pushState而不是hashbangs，因为使您的URL丑陋甚至可能永远损坏是对hashbangs的巨大而永久的不利影响。

为了对所有这些问题进行良好的跟进，Twitter是hashbang URL和单页面界面的先驱者之一，他承认hashbang系统从长远来看很慢，并且实际上他们已经开始撤消决策并返回到老派的链接。

有关此的文章在这里。

我一直!以为刚刚表明，后面的哈希片段对应于URL，并!取代了网站的根目录或域。从理论上讲，它可以是任何东西，但是Google AJAX爬行API似乎喜欢这种方式。

当然，哈希值仅表示没有真正的页面重装发生，所以是的，它是用于AJAX的。编辑：拉根瓦尔德（Raganwald）做得很出色，更详细地解释了这一点。

上面的答案很好地描述了为什么以及如何在Twitter和Facebook上使用它，我错过的是解释#默认情况下的功能...

在“普通”（不是单页应用程序）上，您可以hash通过将元素id放在哈希之后的url中来锚定到具有id的任何元素#

例：

（在Chrome）点击F12或Rihgt Mouse与Inspect element

然后采取id="answer-10831233"并添加到网址，如下所示

/programming/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

您将获得一个链接，该链接跳到页面上的该元素

Facebook和新的Twitter URL中的shebang / hashbang（＃！）是什么？

通过使用#以上答案中描述的方式，您正在引入冲突的行为...尽管我不会为此而睡...由于Angular成为某种标准....