hashchange前端页面跳转.docVIP

hashchange 前端页面跳转 - - 现在有许多网站支持SPI（single page interface）,和传统的MPI（multi page interface）比起来，它无需载入新的网页，速度会快很多，用户体验也会好很多。唯一的问题是如果你的页面改动很大，比如切换tab，页面大部分内容由ajax载入。用户会以为跳转到另一个页面，这时如果他们点击后退按钮，SPI就会出问题了，因为我们只有一个页面。 解决办法就是使用hashchange事件。一方面是当你切换tab时，在url里加入hash，javascript里是location.hash；另一方面是当hash变化是捕捉到该事件，大部分新的浏览器支持onhashchange事件。 至于IE6,7，我们需要用iframe去模拟这两个方面。 一个例子： 最后注意hash的名字不能是html中已有的id，不然ie会出问题： Surprise quirk bonus #1! In Internet Explorer 6, whenever theres a question mark in the hash, this gets extracted and put in the location.search property! It is removed from the location.hash property. If there is a real query string, however, location.search will contain that one instead, and youll only be able to get the whole true hash by parsing the location.href property. Surprise quirk bonus #2! If the location.search property is set, any subsequent # characters will be removed from the location.href (and location.hash) property. In Internet Explorer 6 this means that whenever theres a question mark in the path or the hash, youll experience this quirk. In Internet Explorer 7, this quirk only occurs when theres a question mark in the path. Dont you just love the consistency in Internet Explorer? Surprise quirk bonus #3! If another element on the page has the same id as the value of a hash, that hash will totally mess up the history. So rule of thumb is to avoid hashes with the same id as any elements on the page. If the hashes are generated dynamically and may collide with ids, consider using a prefix/suffix.