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

我刚刚注意到，我们现在使用的长而复杂的Facebook URL如下所示：

http://www.facebook.com/example.profile!/第页/另一页/123456789012345

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

URL现在还具有以下特性！符号。例如，Twitter个人资料URL现在如下所示：

http://twitter.com/!/博尔特钟

是的！现在在URL中扮演一些特殊的角色，比如某个Ajax框架或其他东西，因为新的Facebook和Twitter界面现在基本上是Ajaxified的？ 在我的URL中使用它会对我的Web应用程序有任何好处吗？

这项技术非常有用

这用来告诉谷歌如何索引页面

这项技术已经被使用与HTML5一起引入的JavaScript历史API的能力所取代。对于像www.example.com/ajax.html这样的URL！key=value，谷歌将检查URL www.example.com/ajax.html？\u转义\u片段\u=key=value以获取非ajax版本的内容。

这项技术非常有用

这用来告诉谷歌如何索引页面

---

这项技术已经被使用与HTML5一起引入的JavaScript历史API的能力所取代。对于像www.example.com/ajax.html这样的URL！key=value，Google将检查URL www.example.com/ajax.html？\u expected\u fragment\u=key=value以获取非ajax版本的内容。

八进制/number符号/hashmark在URL中具有特殊意义，它通常标识文档某个部分的名称。确切地说，散列后面的文本是URL的锚定部分。如果您使用Wikipedia，您将看到大多数页面都有一个目录，您可以使用一个锚点跳转到文档中的部分，例如：

https://en.wikipedia.org/wiki/Alan_Turing 识别页面和早期计算机，图灵测试是锚。Facebook和其他Javascript驱动的应用程序（如my own）使用锚定的原因是，它们希望根据对答案的评论，使页面成为可书签的页面，或者支持后退按钮，而无需从服务器重新加载整个页面

为了支持书签和后退按钮，您需要更改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/raganwaldtry_this'; 啊哈！没有页面刷新！类型：

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

这就是问题所在：锚定为Javascript程序员提供了一种机制，用于创建可书签、可索引和后退按钮友好的应用程序。这项技术有一个名字：它是一种技术

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

p、 另外，考虑到所有这些，“砰”或感叹号对谷歌的网络爬虫来说是一个进一步的提示，即完全相同的页面可以从服务器上以稍微不同的URL加载。看见另一种技术是使每个链接指向服务器可访问的URL，然后使用不引人注目的Javascript将其更改为带有锚的SPI

---

这里又是一个关键链接：

八达通/number符号/hashmark在URL中有特殊的意义，它通常标识文档某个部分的名称。确切地说，散列后面的文本是URL的锚定部分。如果你使用维基百科，你会发现大多数页面都有一个目录 您可以使用定位点跳转到文档中的部分，例如：

https://en.wikipedia.org/wiki/Alan_Turing 识别页面和早期计算机，图灵测试是锚。Facebook和其他Javascript驱动的应用程序（如my own）使用锚定的原因是，它们希望根据对答案的评论，使页面成为可书签的页面，或者支持后退按钮，而无需从服务器重新加载整个页面

为了支持书签和后退按钮，您需要更改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/raganwaldtry_this'; 啊哈！没有页面刷新！类型：

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

这就是问题所在：锚定为Javascript程序员提供了一种机制，用于创建可书签、可索引和后退按钮友好的应用程序。这项技术有一个名字：它是一种技术

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

p、 另外，考虑到所有这些，“砰”或感叹号对谷歌的网络爬虫来说是一个进一步的提示，即完全相同的页面可以从服务器上以稍微不同的URL加载。看见另一种技术是使每个链接指向服务器可访问的URL，然后使用不引人注目的Javascript将其更改为带有锚的SPI

这里又是一个关键链接：

我总是假设！只是表示后面的散列片段对应一个URL，带有！取代站点根目录或域。理论上，它可以是任何东西，但谷歌AJAX爬行API似乎喜欢这种方式

当然，散列只是表明没有发生真正的页面重新加载，所以是的，它是用于AJAX目的的。编辑：Raganwald做了一个很好的工作，更详细地解释了这一点。

我总是假设！只是表示后面的散列片段对应一个URL，带有！取代站点根目录或域。理论上，它可以是任何东西，但谷歌AJAX爬行API似乎喜欢这种方式

---

当然，散列只是表明没有发生真正的页面重新加载，所以是的，它是用于AJAX目的的。编辑：Raganwald做了一个很好的工作，更详细地解释了这一点。

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

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

这个角色！仅为谷歌的目的而添加，此符号是谷歌的标准，用于在极端单页界面网站中对AJAX密集型网站进行爬网。当谷歌的爬虫找到一个URL的时候！它知道存在提供相同页面状态的替代传统URL，但在本例中为加载时间

尽管如此！组合对于搜索引擎优化非常有趣，据我所知，只有谷歌支持，通过一些JavaScript技巧，您可以构建SPI网站，使其与任何网络爬虫雅虎、必应……的搜索引擎优化兼容

SPI宣言和演示不使用谷歌的格式！在散列中，这个符号可以很容易地添加，SPI爬网可以更容易地更新：现在！符号被使用并与其他搜索引擎保持兼容

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

困难的问题是生成任何或选定的AJAX页面状态，作为搜索引擎优化的纯HTML，在ItsNat中是非常容易和自动的，同一个站点在同一时间是SPI或页面ba

---

sed用于SEO或禁用JavaScript用于访问时。对于其他web框架，您可以使用双站点方法，一个站点基于SPI，另一个页面基于SEO，例如Twitter使用这种双站点技术

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

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

这个角色！仅为谷歌的目的而添加，此符号是谷歌的标准，用于在极端单页界面网站中对AJAX密集型网站进行爬网。当谷歌的爬虫找到一个URL的时候！它知道存在提供相同页面状态的替代传统URL，但在本例中为加载时间

尽管如此！组合对于搜索引擎优化非常有趣，据我所知，只有谷歌支持，通过一些JavaScript技巧，您可以构建SPI网站，使其与任何网络爬虫雅虎、必应……的搜索引擎优化兼容

SPI宣言和演示不使用谷歌的格式！在散列中，这个符号可以很容易地添加，SPI爬网可以更容易地更新：现在！符号被使用并与其他搜索引擎保持兼容

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

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

如果您正在考虑采用这个hashbang约定，我会的

一旦你爆炸了，你就不能回去了。这可能是最棘手的问题。Ben的帖子提出了一个观点，即当pushState被更广泛地采用时，我们可以抛弃hashbang，回到传统的URL。事实上，你不能。前面我说过URL是永久的，它们被索引和归档，并且通常被保留。更重要的是，酷网址不会改变。我们不想与我们内容的所有有价值的链接脱节。如果您在任何时候都实现了hashbang URL，那么您想要在不中断链接的情况下更改它们，唯一的方法就是在域的根文档上运行一些JavaScript。永远这绝不是暂时的，你要坚持下去

你真的想这么做，因为让你的URL变得丑陋，甚至可能永远被破坏，这对hashbang来说是一个巨大而永久的缺点。

如果你考虑采用这种hashbang约定，我会这么做

一旦你爆炸了，你就不能回去了。这可能是最棘手的问题。Ben的帖子提出了一个观点，即当pushState被更广泛地采用时，我们可以抛弃hashbang，回到传统的URL。事实上，你不能。前面我说过URL是永久的，它们被索引和归档，并且通常被保留。更重要的是，酷网址不会改变。我们不想与我们内容的所有有价值的链接脱节。如果您在任何时候都实现了hashbang URL，那么您想要在不中断链接的情况下更改它们，唯一的方法就是在域的根文档上运行一些JavaScript。永远这绝不是暂时的，你要坚持下去

---

你真的想这么做，因为让你的URL变得丑陋，甚至可能永远被破坏，这对Hashbang来说是一个巨大而永久的缺点。

要对这一切有一个良好的跟进，Twitter——hashbang URL和单页界面的先驱之一——承认hashbang系统从长远来看是缓慢的，他们实际上已经开始扭转这一决定，回到老派链接

---

为了更好地跟进这一切，Twitter——hashbang URL和单页界面的先驱之一——承认hashbang系统从长远来看是缓慢的，他们实际上已经开始改变决定，回到老派链接

---

上面的答案很好地描述了它在twitter和facebook上使用的原因和方式，我错过的是默认情况下的解释

在“普通”的非单页应用程序中，您可以通过将元素id放在哈希之后的url中，将哈希锚定到任何具有id的元素

例如：

在Chrome上单击F12或鼠标下摆并检查元件

然后取id=answer-10831233并添加到url，如下所示

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

你会得到一个链接，跳转到页面上的那个元素

---

以上述答案中描述的方式使用，您引入了冲突行为。。。虽然我不会因为它而失眠。。。由于它已经成为一种标准……上面的答案很好地描述了它在twitter和facebook上使用的原因和方式，我错过的是解释默认情况下它会做什么

在“普通”的非单页应用程序中，您可以通过将元素id放在哈希之后的url中，将哈希锚定到任何具有id的元素

例如：

在Chrome上单击F12或鼠标下摆并检查元件

然后取id=answer-10831233并添加到url，如下所示

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

你会得到一个链接，跳转到页面上的那个元素

---

以上述答案中描述的方式使用，您引入了冲突行为。。。虽然我不会因为它而失眠。。。因为它成了一种标准…

Hmm.必须查找shebang是什么。。。FWIW，它不仅仅是shell和perl脚本，而是在类unix系统上运行的任何脚本。这个行告诉shell该脚本的解释器是什么。。。当然，我的评论与facebook或twitter的评论无关，所以我不会打断我的问题，也不认为有必要这么做。hashbang因为所有错误的原因而被美化，它打破了最佳实践，破坏了渐进式增强和优雅降级的机会。请注意，他们在2015年10月推出了谷歌！所以对于新的应用程序，你不应该再为SEO做这些了。目前，谷歌规范页面的顶部只有一句微妙的白话：这个建议在2015年10月被正式否决。我得查一下shebang是什么。。。FWIW，它不仅仅是shell和perl脚本，而是在类unix系统上运行的任何脚本。这个行告诉shell该脚本的解释器是什么。。。当然，我的评论与facebook或twitter的评论无关，所以我不会打断我的问题，也不认为有必要这么做。hashbang因为所有错误的原因而被美化，它打破了最佳实践，破坏了渐进式增强和优雅降级的机会。请注意，他们在2015年10月推出了谷歌！所以对于新的应用程序，你不应该再为SEO做这些了。目前，谷歌规范页面顶部只有一句微妙的白话：这项建议在2015年10月被正式否决。你确定这就是它的全部内容吗？我经常发现，即使在多次重新加载后，页面加载仍挂在facebook上的shebang URL上，但是如果手动删除！，它起作用了。更不用说你经常会得到1.5个URL，也就是说，旧的URL仍然存在，只是添加了新的部分，即photo.php？id=。。。两次，但ID不同。更不用说了！也被添加到facebook邮件URL中，这些URL可能不是也不应该是可索引的。不管怎么说，我觉得这个错误非常烦人，因为它似乎是我慢行主页上出现如此多页面错误的原因。Facebook有错误并不会使这些错误成为URL中两个字符的错误。如果站点正确编码以理解和生成它们，那么可爬行的AJAX URL就非常方便。Facebook上的许多其他东西也会出问题。@Pedery:我只在Facebook上见过这个问题。我同意，这会让我一直在非Facebook的墙上挣扎。至于搜索引擎，与可索引的非AJAX URL相比，具有可索引的AJAX URL不会使页面被索引。Facebook使用这种URL格式不仅仅是为了谷歌的利益——它还使Facebook上通过AJAX访问的页面在其他情况下无法成为书签。要了解一些有趣的注意事项，也请阅读本文：你确定这就是全部内容吗？我经常发现，即使在多次重新加载后，页面加载仍挂在facebook上的shebang URL上，但是如果手动删除！，它起作用了。更不用说你经常会得到1.5个URL，也就是说，旧的URL仍然存在，只是添加了新的部分，即photo.php？id=。。。两次，但ID不同。更不用说了！也被添加到facebook邮件URL中，这些URL可能不是也不应该是可索引的。不管怎么说，我觉得这个错误非常烦人，因为它似乎是我慢行主页上出现如此多页面错误的原因。Facebook有错误并不会使这些错误成为URL中两个字符的错误。如果站点正确编码以理解和生成它们，那么可爬行的AJAX URL就非常方便。Facebook上的许多其他东西也会出问题。@Pedery:我只在Facebook上见过这个问题。我同意，这会让我一直在非Facebook的墙上挣扎。至于搜索引擎，与可索引的非AJAX URL相比，具有可索引的AJAX URL不会使页面被索引。Facebook使用这种URL格式不仅仅是为了谷歌的利益——它还可以通过Fac上的AJAX访问页面

---

---

电子书可以成为书签，否则它们就不可能成为书签。要了解一些有趣的注意事项，还可以阅读本文：但是，如果网络爬虫希望对没有这种优化的应用程序进行索引，那么它仍然是可爬的。不是真的。哈希不会发送到服务器。仅供参考：self.document.location.hash提供此哈希的值哈希不会发送到服务器。抢手货除了一段pps之外，这个完整的答案是多余的。@imaginonic：我迟到了，但尽管做得很好，但90%的答案都没有触及主题！这完全是我问题的一个方面。这就是为什么他说这是多余的。这里的上升投票数可能是由于我的问题提交给Hacker News时的高流量，再加上这个答案的长度。但是，如果网络爬虫希望对没有这种优化的应用程序进行索引，那么它仍然是可爬行的。不是真的。哈希不会发送到服务器。仅供参考：self.document.location.hash提供此哈希的值哈希不会发送到服务器。抢手货除了一段pps之外，这个完整的答案是多余的。@imaginonic：我迟到了，但尽管做得很好，但90%的答案都没有触及主题！这完全是我问题的一个方面。这就是为什么他说这是多余的。这里的上升投票数可能是因为我的问题提交给Hacker News时的高流量，再加上这个答案的长度。那么渐进增强原则呢？网站不应该因为禁用JavaScript而崩溃。相信我，javascript不仅在过时的浏览器中被禁用，而且被许多不喜欢执行随机JS的安全意识强的用户禁用。那么渐进增强原理呢？网站不应该因为禁用JavaScript而崩溃。相信我，javascript不仅在过时的浏览器中被禁用，而且也被许多不喜欢执行随机JS的安全意识强的用户禁用。我认为你对Hashbang的批评是正确的，但使用pushState作为替代品意味着我们将失去在基于URL的单页应用程序中加载内容的能力。我在工作中遇到了一个类似的问题——我们开始使用Page.js，它使用pushState进行单页导航，以前我们使用Hasher和Crossroads散列攻击。因此，我们需要拯救像/blahfoo/feep/baz？stuff=胡说八道这样的路径。新的路径等价物将是/blah/foo/feep/baz？stuff=无意义注释替换为/。我只需在设置中设置一个catch/blahand检查其是否有has的路由，如果有，则在斜杠后附加该散列的内容。获救。我认为你对Hashbang的批评是正确的，但仅仅使用pushState作为替代品意味着我们将失去在基于URL的单页应用程序中加载内容的能力。我在工作中遇到了一个类似的问题——我们开始使用Page.js，它使用pushState进行单页导航，以前我们使用Hasher和Crossroads散列攻击。因此，我们需要拯救像/blahfoo/feep/baz？stuff=胡说八道这样的路径。新的路径等价物将是/blah/foo/feep/baz？stuff=无意义注释替换为/。我只需在设置中设置一个catch/blahand检查其是否有has的路由，如果有，则在斜杠后附加该散列的内容。获救raganwald的回答包含了你说你错过的解释。即使如此，我也看不出这个问题如何从一个关于如何工作的教程中受益——这个问题假设读者已经熟悉URL片段，并且这个功能在这里并不真正相关，除了你关于冲突行为的评论。@BoltClock Hi BoltClock，但是，如果不解释什么是默认行为，说“它会冲突”，读者就不会知道什么是危险的，什么样的功能可能会丢失。。。我只是喜欢用图片给出很好的答案，如果我发现遗漏了一些尽可能完整的东西……raganwald的答案包含了你说你遗漏的解释。即使如此，我也看不出这个问题如何从一个关于如何工作的教程中受益——这个问题假设读者已经熟悉URL片段，并且这个功能在这里并不真正相关，除了你关于冲突行为的评论。@BoltClock Hi BoltClock，但是，如果不解释什么是默认行为，说“它会冲突”，读者就不会知道什么是危险的，什么样的功能可能会丢失。。。我只是喜欢用图片给出好的答案，如果我发现遗漏了一些尽可能完整的东西。。。