Hashbang与URI解析 [英] Hashbang versus URI parse

查看:375
本文介绍了Hashbang与URI解析的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我期待将我的网站充分异步文件加载,但我不希望使用#!方法,因为1)我不吨要断开链接,和2)我要处理的URI的网站获得更灵活的方式。

I am looking to move my site into full async document loading, but I don't want to use the #! method of request processing because 1) I don't want to break links, and 2) I want a more flexible way of processing the URIs the site gets.

我已经能够建立一个光MVC为我的网站,它允许一个共同的风格的URL(例如:的 http://ddrewdesign.com/blog/jquery-is-or-is-child-of-function )做出正确的请求。

I've been able to build a light MVC for my site that allows a common-style url ( ex: http://ddrewdesign.com/blog/jquery-is-or-is-child-of-function ) to make the correct requests.

我的问题是:这是很轻松的事情。我在想什么?并Gawker的和谷歌为什么要选择#!时,这个方法似乎是从用户体验的角度来看更有意义?

My question is: this was trivially easy to do. What am I missing? Why did Gawker and Google opt for #! when this method seems to make more sense from a user experience perspective?

修改

有关澄清,原来,我的网站是用检索的请求的查询字符串的方法(没有的mod_rewrite )纯粹。这些链接都是在网上,我不能让他们打破。这是我的理解是,他们会如果我将使用hashbang方法。还是那句话:这可能是我的困惑的一部分,所以我不是说我已经占了一切。我问那是什么我失踪,因为没有什么我读过迄今已使它看起来像我可以容纳查询字符串。

For clarification, originally, my site was solely using the querystring method (no mod_rewrite) of retrieving for requests. These links are all over the web, and I can't have them break. It's my understanding that they will if I move to use the hashbang method. Again: this might be part of my confusion, so I'm not saying I've accounted for everything. I'm asking what it is I'm missing, because nothing I've read thus far has made it seem like I can accommodate that querystring.

推荐答案

我认为你正在寻找history.pushState的URL,它允许你做部分页面加载,并且具有相同的URL使用和不使用的JavaScript。

I think you're looking for history.pushState urls, which allow you to do partial page loads, and have the same urls with and without javascript.

举例来说,假设你的基地址为 http://site.com/ 随着history.pushState,您可以使用JavaScript来修改页面为 javascript.htm ,因此该URL变为 http://site.com/javascript.htm

For example, say your base url is http://site.com/ With history.pushState, you can use javascript to modify the page to be javascript.htm, so that the url changes to http://site.com/javascript.htm.

#!网​​址只用JavaScript的工作,因为#fragment不能访问服务器端。随着hashbangs,您的网址将类似于 http://site.com/#javascript.htm 注意,是不必要的。既然你可以在哈希后设置什么,你也可以有网址 http://site.com/#!/javascript.htm

#! urls only work with javascript, because the #fragment can't be accessed server-side. With hashbangs, your url would be something like http://site.com/#javascript.htm Note that the ! is unnecessary. Since you can set anything after the hash, you could also have the url http://site.com/#!/javascript.htm.

不幸的是,因为IE不支持history.pushState,你必须有#!网​​址作为替代。

Unfortunately, since IE doesn't support history.pushState, you have to have #! urls as a fallback.

这两种方法都断背扣,但网址必须设立不同的方式为每个方法。

Neither method breaks the back button, but urls have to be set up different ways for each method.

Hashbangs的工作是这样的:

Hashbangs work something like this:

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比较复杂一点,因为你存储在一个对象页面的状态。

History.pushState is a bit more complex, as you store the "state" of the page in an object.

下面是此方法的一些很好的参考:

Here are some good references on this method:

  • 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/ 链接到一堆不同NOCOW地图,并嵌入他们在一个iframe中在页面中。随着禁用JavaScript,该链接会像 http://timshomepage.net/comic/dilbert 。随着history.pushState,我也有同样的网址。随着hashbang回退,我得到这样的URL: http://timshomepage.net/comic/#!/迪尔伯特

Both methods require javascript page manipulation. I have an example of these kinds of urls. http://timshomepage.net/comic/ has links to a bunch of different webcomics, and embeds them in an iframe in the page. With javascript disabled, the link will be something like http://timshomepage.net/comic/dilbert. With history.pushState, I can have that same url. With hashbang fallback, I get a url like this: http://timshomepage.net/comic/#!/dilbert

这篇关于Hashbang与URI解析的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆