做 Twitter、Hash-Bang # 之类的链接！ URL的[重复]

Posted 2023-02-22

【中文标题】做 Twitter、Hash-Bang # 之类的链接！ URL的[重复]

【英文标题】：Doing links like Twitter, Hash-Bang #! URL's [duplicate]

【发布时间】：2012-04-14 16:22:42

【问题描述】：

可能重复：What’s the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

我想知道 Twitter 是如何处理其链接的。

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

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

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

【问题讨论】：

当您将问题标记为重复时，引用重复本身会很有用。你说的是这个吗？ ***.com/questions/3009380/…

您现在应该认真重新考虑您接受的答案，因为@BillBad 解释得非常好！

@Emin 好的，我做到了！好久没回过头来问这个问题了

【参考方案1】：

“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: Getting Started。

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

从今天开始，如果您在旧版浏览器中加载 Facebook，您会看到 hash-bangs，但当前浏览器会演示 pushstate 的使用。

【讨论】：

很棒的答案！过去 1 小时我一直在浏览互联网以了解整个概念，您解释得很好。

它没有过时。值得注意的是，如果您有一个（文字）单页应用程序，更改 url 将不起作用。您必须将 Web 服务器设置为将所有请求通配到后台的单个页面。

@Caleb 这非常非常重要，我经常读到诸如“hashbangs 已死”之类的东西，但通常每个人都忽略了这个小细节。

【参考方案2】：

您可能想在Unique URLs 上查看更多信息。

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

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

【讨论】：

Twitter 的 /#!/ URL 路径怎么样？这只添加了#。另外，有没有活生生的例子？

如果你想要一个活生生的例子，只需使用 Twitter。 window.location.hash 返回 "#" 之后的任何内容（包括哈希），例如 #!/i/connect 或 #!/i/discover。然后您可以使用该字符串来确定要通过 AJAX 加载的位置。这取决于他们如何使用哈希来确定他们去哪里的站点。没有标准做法如何解析散列后的数据。在 twitter 的例子中，它在第一个 / 之后开始解析。只需输入/#!/ 或/# 即可加载主页。

我正在查看与 window.location.has 相关的代码，但不知道其中的任何含义。 (function()var a=document.getElementsByTagName("html")[0],b=window.location.hash.split("?")[0],c=b.match(/#/)&&b.replace(/#[!]?[\/]?/,"")!=="";c?a.className+=" remove-prerendered-content":(a.className+=" use-prerendered-content",a.getAttribute("data-nav-highlight-class-name")&&(a.className+=" "+a.getAttribute("data-nav-highlight-class-name"))))();

它所做的是删除参数（? 之后的参数），然后删除 /#! 或 /#。然后确定是在html 中添加pre-rendered content 或remove the pre-rendered content 的className，并获取几个className。就是这样。