26

可能重复:
Facebook 和新 Twitter URL 中的 shebang/hashbang (#!) 是什么?

我想知道 Twitter 是如何工作的。

如果您查看源代码,您使用的链接类似于 /#!/i/connect 或 /#!/i/discover,但它们没有附加 JavaScript 函数,如 load('connect')或其他东西,并且它不需要重新加载页面。它只是改变了页面内容。

我看到了这个页面,但是所有这些文件都必须存在,你不能直接进入其中一个。我想在 Twitter 上,这些文件中的每一个都不存在,而是以其他方法处理的。不过,如果我错了,请纠正我。

有没有办法可以复制这种效果?如果是这样,是否有关于如何执行此操作的教程?

4

2 回答 2

124

“Hash-Bang”导航,有时也被称为...

http://example.com/path/to/#!/some-ajax-state

...是一个临时问题的临时解决方案,由于现代浏览器标准,该问题正迅速成为非问题。Twitter 很可能会逐步淘汰它,就像 Facebook 已经在做的那样。

它是几个概念的结合...

过去,链接有两个用途:加载新文档和/或向下滚动到嵌入的锚点,如井号 (#) 所示。

http://example.com/script.php#fourth-paragraph

哈希之后的 URL 中的任何内容都不是从服务器请求的,而是由浏览器在页面中搜索的。这一切仍然很好。

通过采用 AJAX,可以将新内容加载到当前(已加载)页面中。通过这种动态加载,出现了几个问题:1)没有唯一的 URL 用于添加书签或链接到这个新内容,2)搜索永远不会看到它。

一些聪明的人通过使用哈希作为一种“状态”引用来解决第一个问题,以包含在链接和书签中。文档加载后,浏览器读取哈希并运行 AJAX 请求,显示页面及其动态 AJAX 更改。

http://example.com/script.php#some-ajax-state

这解决了AJAX问题,但搜索引擎问题仍然存在。搜索引擎不会像浏览器那样加载页面和执行 Javascript。

谷歌来救援。Google 提出了一种方案,其中任何带有井号 (#!) 而非井号 (#) 的 URL 都会向搜索机器人建议存在用于索引的备用 URL,其中涉及“_escaped_fragment_”变量等事物。在此处阅读:Ajax Crawling:入门

今天,随着大多数主流浏览器采用 Javascript 的pushstate,所有这些都变得过时了。使用 pushstate,当内容被动态加载或更改时,可以更改当前页面 URL 而不会导致页面加载。如果需要,这会为书签和历史记录提供一个真实的工作 URL。然后可以像往常一样制作链接,没有 hashes & hash-bangs

到今天为止,如果您在旧版浏览器中加载 Facebook,您会看到 hash-bangs,但当前浏览器将演示 pushstate 的使用。

于 2012-04-27T17:57:31.040 回答
2

您可能想了解更多关于唯一 URL的信息。

它通过 AJAX 加载页面,并解析“hash”(“#”之后的值)以确定它将加载哪个页面。此外,由于 AJAX 请求不计入浏览器历史记录的性质,因此使用此方法,因此“后退按钮中断”。但是浏览器确实将哈希更改存储到历史记录中。

使用散列加上您可以使用散列来确定页面这一事实,您可以说您可以将 AJAX 请求的页面保留在“历史记录”中。除此之外,散列 URL 只是 URL,它们可以添加书签,包括哈希,因此您也可以为 AJAX 请求的页面添加书签。

于 2012-03-31T01:24:00.400 回答