Hashbang 与 URI 解析

Posted 2023-02-22

【中文标题】Hashbang 与 URI 解析

【英文标题】：Hashbang versus URI parse

【发布时间】：2011-09-25 06:33:42

【问题描述】：

我希望将我的网站移动到完整的异步文档加载中，但我不想使用 #! 请求处理方法，因为 1）我不想断开链接，并且 2）我想要一个处理站点获取的 URI 的更灵活的方式。

我已经能够为我的网站构建一个轻量级 MVC，它允许通用样式的 url（例如：http://ddrewdesign.com/blog/jquery-is-or-is-child-of-function）发出正确的请求。

我的问题是：这很容易做到。我错过了什么？为什么 Gawker 和 Google 选择 #!，而从用户体验的角度来看，这种方法似乎更有意义？

编辑

为了澄清，最初，我的网站仅使用查询字符串方法（没有mod_rewrite）来检索请求。这些链接遍布整个网络，我不能让它们中断。我的理解是，如果我开始使用 hashbang 方法，他们会这样做。再说一遍：这可能是我困惑的一部分，所以我并不是说我已经解释了一切。我在问我错过了什么，因为到目前为止我读过的任何内容都没有让我看起来可以容纳那个查询字符串。

【问题讨论】：

我不太明白#!在 URL 中断开链接。你能举例说明这种情况发生在哪里吗？

如何使前进和后退按钮起作用？

@Pointy：我还没有走到那一步，但内部链接表面上会正常编写，并被 javascript 拦截以处理请求并发布响应。如果这在本机上不起作用，那么我想我将不得不以某种方式手动编写它。 @demonkoryo：为澄清而编辑。

我的理解是#!方案在那里，以便浏览器可以使用 URL 来响应前进/后退按钮，同时还为您的客户端代码提供执行精美内容加载所需的东西。但是，我不太清楚这一切是如何运作的。

【参考方案1】：

我认为您正在寻找 history.pushState url，它允许您进行部分页面加载，并且在使用和不使用 javascript 时具有相同的 url。

比如说你的base url是http://site.com/，用history.pushState，你可以用javascript修改页面为javascript.htm，这样url就变成http://site.com/javascript.htm了。

#! url 仅适用于 javascript，因为无法在服务器端访问 #fragment。使用 hashbangs，您的网址将类似于 http://site.com/#javascript.htm 请注意，! 是不必要的。由于您可以在哈希之后设置任何内容，因此您还可以使用 url http://site.com/#!/javascript.htm。

很遗憾，由于 IE 不支持 history.pushState，因此您必须使用 #! 网址作为后备。

这两种方法都不会破坏后退按钮，但必须为每种方法设置不同的网址。

Hashbang 的工作原理如下：

function change()
   //page update logic


//hashchange event binding
(typeof window.addeventListener === "function")
    ? window.addEventListener("hashchange", change, false)
    : window.attachEvent("onhashchange", change);

 //This is how the hash is set
 location.hash = "hashstring";

 //Accessing it returns the hashstring, with a #
 location.hash; //returns #hashstring

History.pushState 有点复杂，因为您将页面的“状态”存储在一个对象中。

以下是有关此方法的一些很好的参考：

Javascript：权威指南第 6 版 https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history http://diveintohtml5.ep.io/history.html

这两种方法都需要 javascript 页面操作。我有一个这类网址的例子。 http://timshomepage.net/comic/ 有一系列不同网络漫画的链接，并将它们嵌入到页面的 iframe 中。禁用 javascript 后，链接将类似于 http://timshomepage.net/comic/dilbert。使用 history.pushState，我可以拥有相同的 url。使用 hashbang 后备，我得到一个这样的网址：http://timshomepage.net/comic/#!/dilbert

【讨论】：

您说“无论是否使用 Javascript，都具有相同的 url”。使用此方法的网站如何处理没有 Javascript 的请求？

@dclowd9901 该网址只是一个普通网址，因此这取决于您的服务器端脚本语言和网址方案。