Hashbang与URI解析

一尘不染

Hashbang与URI解析

ajax

我希望将我的网站转移到完全异步文档加载中，但是我不想使用#!请求处理的方法，因为1）我不想破坏链接，以及2）我想要一种更灵活的处理方式网站获取的URI。

我已经能够为我的网站构建一个简单的MVC，该MVC允许使用通用样式的网址（例如：http：//ddrewdesign.com/blog/jquery-is-or-is-child-of-
function）来制作正确的要求。

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

编辑

为了澄清起见，最初，我的网站仅使用querystring方法（no
mod_rewrite）来检索请求。这些链接遍布网络，我无法中断。我的理解是，如果我转为使用hashbang方法，他们会这样做。再说一次：这可能是我困惑的一部分，所以我并不是说我已经考虑了所有问题。我要问的是我所缺少的东西，因为到目前为止，我所读的任何内容似乎都无法容纳该查询字符串。

阅读 209

2020-07-26

共1个答案

一尘不染

我认为您正在寻找history.pushState网址，该网址可让您进行部分页面加载，并且无论是否带有javascript，它们都具有相同的网址。

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

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

不幸的是，由于IE不支持history.pushState，因此必须将#!URL作为备用。

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

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/具有指向许多其他网络漫画的链接，并将它们嵌入到页面的iframe中。禁用javascript后，链接将类似于 http://timshomepage.net/comic/dilbert。使用history.pushState，我可以拥有相同的URL。通过hashbang后备，我得到一个这样的URL：http
://timshomepage.net/comic/#!/dilbert

2020-07-26