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

Question

我刚才注意到，我们过去常常使用的漫长而复杂的Facebook网址如下所示：

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

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

new Twitter网址现在还包含#!个符号。例如，Twitter个人资料网址现在看起来像这样：

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

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

Answer 1

此技巧为now deprecated。

此曾经告诉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版本。

Answer 2

octothorpe / number-sign / hashmark在URL中具有特殊意义，它通常标识文档部分的名称。精确的术语是散列后面的文本是URL的 anchor 部分。如果您使用维基百科，您将看到大多数页面都有一个目录，您可以使用锚点跳转到文档中的部分，例如：

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应用程序在浏览器中显示在一个“页面”上，但是有许多可书签部分，它们尊重后退按钮。当用户输入不同的“状态”时，应用程序必须更改锚点;同样，如果用户使用后退按钮或书签或链接加载包含锚点的应用程序，则应用程序必须恢复适当的状态。

所以你有它：Anchors为Javascript程序员提供了一个机制，用于制作可收起书签，可索引和后退按钮的应用程序。这种技术有一个名称：它是Single Page Interface。

P.S。这项技术有第四个好处：通过AJAX加载页面内容然后将其注入当前DOM可能比加载新页面快得多。除了速度增加之外，还可以在程序员的控制下执行诸如在后台加载某些部分等其他技巧。

p.p.s。鉴于所有这些，“爆炸”或感叹号进一步提示谷歌的网络抓取工具，可以从稍微不同的URL从服务器加载完全相同的页面。见Ajax Crawling。另一种技术是使每个链接指向服务器可访问的URL，然后使用不显眼的Javascript将其更改为带锚的SPI。

以下是关键链接：The Single Page Interface Manifesto

Answer 3

首先：我是raganwald引用的The Single Page Interface Manifesto的作者

正如raganwald所解释的那样，FaceBook和Twitter中使用的单页面接口（SPI）方法最重要的方面是在URL中使用散列#

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

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

SPI宣言和演示不会在哈希中使用Google的!格式，这种表示法可以轻松添加，SPI爬行可能更容易（更新：现在！使用表示法并且仍然与其他搜索引擎兼容） ）。

看看这个tutorial，是一个简单的ItsNat SPI站点的例子，但是你可以为其他框架选择一些想法，这个例子对于任何网络爬虫都是SEO兼容的。

难的问题是生成任何（或选定的）“AJAX页面状态”作为SEO的纯HTML，在ItsNat中非常容易和自动，同一站点在同一时间SPI或基于SEO的页面（或者当JavaScript已禁用可访问性）。使用其他Web框架，您可以遵循双站点方法，一个站点基于SPI，另一个基于SEO，例如Twitter使用这种“双站点”技术。

Answer 4

如果你正在考虑采用这种混乱的约定，我会very careful。

  

一旦你好了，你就不能回去了。这可能是最棘手的问题。 Ben的帖子提出了这样一个观点，即当pushState被广泛采用时，我们可以留下hashbang并返回传统的URL。嗯，事实是，你做不到。之前我曾说过，URL是永久性的，它们会被编入索引并存档，并且通常会被保留。除此之外，酷网址不会改变。我们不希望自己与我们内容的所有有价值的链接脱节。如果您已经在任何时候实现了hashbang URL，那么想要在不破坏链接的情况下更改它们，唯一的方法就是在域的根文档上运行一些JavaScript。永远。这绝不是暂时的，你会坚持下去。

你真的想要use pushState instead of hashbangs，因为让你的网址变得丑陋而且可能永远破碎 - 对于hashbang来说是一个巨大而永久的缺点。

Answer 5

为了对所有这些进行良好的跟进，Twitter - hashbang URL和单页界面的先驱之一 - 承认，hashbang系统从长远来看是缓慢的，并且他们实际上已经开始扭转决策并回到老派的联系。

Article about this is here.

Answer 6

我总是假设!刚刚表示后面的哈希片段对应一个URL，!取代了站点根或域。从理论上讲，它可能是任何东西，但似乎Google AJAX Crawling API就是这样的。

哈希当然只是表明没有真正的页面重新加载，所以是的，这是出于AJAX的目的。 编辑：Raganwald做了一个可爱的工作，更详细地解释了这一点。

Answer 7

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

正常情况下＆＃39; （不是单个页面应用程序）您可以通过在哈希hash

之后将元素id放在url中来使用#锚定到具有id的任何元素

示例：

（在Chrome上）点击 F12 或 Rihgt鼠标和Inspect element

然后选择id="answer-10831233"并添加到url，如下面的

https://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

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

What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

以上述答案中描述的方式使用#，你引入了相互矛盾的行为......虽然我不会因此而疏忽......自从Angular成为一种标准之后...... ..