Hashbang与URI解析

 

我正在寻找将我的网站移入完全异步文档加载，但我不想使用#! 请求处理的方法，因为1）我不想断开链接，2）我想要一个更灵活的方式来处理网站获得的URI。

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

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

编辑

澄清，最初，我的网站是完全使用查询字符串方法（无mod_rewrite ）的检索请求。 这些链接遍布整个网络，我不能让它们断裂。 这是我的理解，他们会，如果我移动使用hashbang方法。 再一次：这可能是我混乱的一部分，所以我不是说我已经解释了一切。 我在问我错过了什么，因为到目前为止我没有看到任何东西让我看起来像我可以容纳那个查询字符串。

我认为你正在寻找history.pushState的URL，它允许你做部分页面加载，并有和没有JavaScript的相同的URL。

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

#! 网址只能使用javascript，因为#fragment无法访问服务器端。 随着hashbangs，你的网址将是类似于http://site.com/#javascript.htm请注意! 是不必要的。 由于您可以在散列之后设置任何内容，因此您也可以使用url 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：权威指南第6版
  • https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
  • http://diveintohtml5.ep.io/history.html

    • 这两种方法都需要JavaScript页面操作。 我有这种类型的网址的例子。 http://timshomepage.net/comic/链接到一堆不同的webcomics，并将它们嵌入到页面中的iframe中。 在JavaScript禁用的情况下，链接将会像http://timshomepage.net/comic/dilbert。 随着history.pushState，我可以有相同的网址。 随着hashbang后备，我得到这样的网址：http://timshomepage.net/comic/#!/dilbert

    链接地址: http://www.djcxy.com/p/64651.html

    上一篇: Hashbang versus URI parse

    下一篇: What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?