url - facebook和新的Twitter URLs中以/hashbang(#!) 是什么?

  显示原文与译文双语对照的内容

我刚刚注意到长的。令人费解Facebook的url现在我们习惯类似于:

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

对于我所记得,今年早些时候这就是正常( 从 # 开始) URL-fragment-like字符串,没有感叹号。 但现在它是一个东西或者 hashbang ( #! ),我以前只在shell脚本和Perl脚本中看到过。

新 Twitter url现在也具有 #! 符号。 Twitter 配置文件 URL,例如现在看起来像这样:

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

#! 现在在url中扮演特殊角色,比如某些Ajax框架,还是因为新的Facebook和 Twitter 界面现在基本上是 Ajaxified? 在我的网址中使用这将使我的Web应用程序以任何方式受益?

时间:

这告诉谷歌如何索引页面。

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

这种技术大部分被使用在HTML5旁边的JavaScript历史API所取代。 对于这样一个 URL www.example.com/ajax.html#!key=value ,谷歌将检查网址 www.example.com/ajax.html?_escaped_fragment_=key=value 获取内容的non-AJAX版本。

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

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

https://secure.wikimedia.org/wikipedia/en/wiki/Alan_Turing 标识页面和 Early_computers_and_the_Turing_test 在服务器,锚。它的原因,脸谱网和其他( 就像我自己的木&石头) Javascript-driven应用程序使用是否可以用书签标记的船锚是,他们要做页面的后退按钮 ( 根据对那个答案的评论) 或者支持不用重新加载整个页上。

为了支持书签和后退按钮,你需要更改 URL 。 但是,如果你更改页面部分( 如 window.location = 'http://raganwald.com'; ) 到其他URL或者不指定锚点,浏览器将从URL加载整个页面。 在safari控制台的Firebug或者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';

Aha 没有页面刷新类型: !


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

在浏览器中 history, are.还是没有刷新。使用上一步按钮可以看到,这些 url 浏览器注意到我们在同一个页面,但只是改变了锚点,所以它没有重新加载。 多亏了这一特点,设有一个单独的Javascript应用程序,它显示到浏览器,以避免在同一'页面'但提到有很多可以用书签标记的部分遵守规定的返回按钮。 应用程序在用户输入不同的'状态'时必须更改锁定,如果用户使用back上一步button按钮或者书签或者链接加载应用程序,则应用程序必须还原适当的状态。

这样就有了它: 于制作可以用书签标记,索引的,相关和 back-button-friendly applications,们提供了Javascript程序员提供一个 mechanism. 这里技术有一个名称: 这是一个单页接口

p.s 。这个技术有第四个好处: 通过AJAX加载页面内容,然后将它的注入到当前的DOM中比加载新页面快得多。 除了速度增加之外,还可以在程序员的控制下执行诸如加载背景中某些部分的更多技巧。

以细微不同 url, p.p.s 。考虑讨论这一点,'爆炸'或者感叹的是一个进一步的提示到站点的谷歌爬虫的完全相同的页面从服务器可以加载。 参见 Ajax爬网 web 。 另一种技术是让每个链接指向一个 server-accessible URL,然后使用低调的Javascript将它更改为带有锚点的SPI 。

下面是密钥链接: 单页接口声明

首先:我是raganwald所引用的单页界面声明的作者

作为文档单页raganwald具有很好解释,最重要的方面接口( SPI ) 进场用到的脸谱和 Twitter 就是利用哈希 # 在 url

字符 只用于谷歌目的,这个符号是一个谷歌"标准",用于在 AJAX ( 在极端的单页界面网站中) 上抓取网站。! 当谷歌的爬虫发现一个带有 #!的URL时,它知道另一个传统的URL提供了相同的页面"状态",但在这个例子中是加载时间。

尽管有这些对 SEO #! 组合是非常有趣的,只是支持的谷歌( 据我所知) 服务提供者类,与一些浏览器提供了技巧后,你就可以构建网站的搜索引擎优化对于任何网络爬虫( 雅虎,bing 。。) 兼容。

SPI宣言和演示不使用格式谷歌中 的服务提供者类哈希表,这种表示法很容易添加和爬行情况甚至可能更容易( 更新:! 现在符号被使用并保持与其他搜索引擎兼容。

看看这个教程,是一个简单的ItsNat SPI站点的例子,但是你可以为其他框架挑选一些想法。这个例子是对任何网站爬虫的优化。

难题是生成任何( 或者选定或者)"ajax页面状态"为纯 HTML ItsNat中对于SEO来说,非常容易和自动服务提供者类,该网站内容时在同一时间或者基于页的搜索引擎优化的( 或者禁用js时的可以访问性) 。 有了其他的网站框架,你可以使用双倍站点方法,一个站点是基于SPI的,另一个基于SEO的页面,比如 Twitter 使用这个"双站点"技术。

我将是非常小心如果你正考虑采用这种hashbang约定。

一旦你 hashbang,你无法回到过去 这可能是stickiest问题。 文章的文章提出了当pushState被广泛采用时,我们可以留下hashbangs并返回传统 url 。 事实是你不能。 前面我声明url永远是永久的,它们得到索引并归档,通常保存在。 要添加,很酷的url不会改变。 我们不想将自己与内容的所有宝贵链接断开。 如果你在任何时候都实现了 hashbang url,那么在不破坏链接的情况下,只需要在你的域的根文档上运行一些 JavaScript 。 永远,它不是暂时的,你会被它粘住。

你真的想要使用pushState代替 hashbangs 永远,因为丑陋,并且可能使你的url破 -- --是一项艰巨的和永久的缺点来 hashbangs 。

关于这一切,Twitter - hashbang和的先锋之一,网址,有很好的后续行动 single-page-interface - 实际上承认了hashbang体系比较滞后,从长远来看,并且他们已经开始倒车的决定和返回到老牌的链接。

文章在这里。

我总是假设 只是表明散列Fragment对应于一个 URL, 代替站点根目录或者域。! 理论上,它可能是任何东西,但似乎谷歌的AJAX抓取API喜欢这样。

当然,哈希只是表示没有真正的页面重新加载,所以是的,它是用于AJAX目的的。 编辑:Raganwald在更详细的解释中做了一个漂亮的工作。

...