Question

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

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

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

编辑

为了澄清，最初，我的网站仅使用查询字符串方法（无mod_rewrite）来检索请求。这些链接遍布整个网络，我不能让它们破裂。我的理解是，如果我转向使用hashbang方法，他们会。再说一遍：这可能是我困惑的一部分，所以我并不是说我已经占了一切。我问的是我错过了什么，因为到目前为止我所阅读的内容并没有让我觉得我可以接受这个问题。

Answer 1

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

例如，假设您的基本网址为http://site.com/使用history.pushState，您可以使用javascript将网页修改为javascript.htm，以便网址更改为http://site.com/javascript.htm。

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

不幸的是，由于IE不支持history.pushState，因此您必须将#!个网址作为后备。

两种方法都没有打破后退按钮，但必须为每种方法设置不同的方式。

Hashbangs的工作方式如下：

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：The Definitive Guide 6th Edition
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

Hashbang与URI解析

1 个答案: