关于onhashchange事件

概述onhashchange 事件是一个新的事件，改事件在location.hash发生改变的时候触发。FF3.6a2, IE 8, Chrome 4.0.206.1均支持该事件。该事件在ajax无刷新页面提交中，能带来更好的用户体验。我们知道，在一个ajax请求中，每次页面更新不能更新地址栏，历史记录也不能记录每次更新的痕迹，地址栏左侧的&ldq…

onhashchange 事件是一个新的事件，改事件在location.hash发生改变的时候触发。FF3.6a2,IE 8,Chrome 4.0.206.1均支持该事件。该事件在AJAX无刷新页面提交中，能带来更好的用户体验。我们知道，在一个AJAX请求中，每次页面更新不能更新地址栏，历史记录也不能记录每次更新的痕迹，地址栏左侧的“前进”和“后退”按钮失去了原有的功能。有了Onhashchange事件，我们在AJAX无刷新页面提交的同时，可以很方便的记录每次更新的痕迹。ie8的AJAX Navigations利用该事件放大缩小地图，记录用户访问的痕迹，可查看AJAX Map。

我这里并不用AJAX提交实例来说明它如何使用，而是用一个我们经常用到的tab切换来说说它的使用方法。在传统的tab切换中，点击“前进”和“后退”按钮并不能回到以前的状态。以下是测试的HTML代码：

<div class="tabBox" ID="hashTab">
<ul class="tabTit">
<li><a href="#item1">item1</a></li>
<li><a href="#item2">item2</a></li>
<li><a href="#item3">item3</a></li>
<li class="last"><a href="#item4">item4</a></li>
</ul>
<div class="tabCon">
<div class="item" ID="item1">
这里是第一个选项
</div>
<div class="item hIDe" ID="item2">
这里是第二个选项
</div>
<div class="item hIDe" ID="item3">
这里是第三个选项
</div>
<div class="item hIDe" ID="item4">
这里是第四个选项
</div>
</div>
</div>

CSS代码不再列出，详情可以参考示例页。接下来我们开始构建tab切换效果的函数，利用jquery，可以很容易的构建我们需要的函数。当然，你也可以使用jquery自身的tab切换插件。

var current = "#item1";
var Title = document.Title;
function tabSwitch(obj,current){
$(".tabTit li").removeClass("current");
$(current).closest("li").addClass("current");
$(".tabCon .item").hIDe();
$(obj).show();
window.location.hash = obj;
document.Title = Title + " | " + obj.split("#")[1];
$("#currentObj").HTML("当前被点击的对象为：" + obj + "");
}

上面的代码中，变量current记录当前被点击的对象，Title记录页面的Title，以便每次，点击时更新页面的Title。每次点击时，将每次点击的对象记录在hash之中。至于触发事件，不过是对比当前hash与window.location.hash，并将新的hash存储到window.location.hash之中。

function HashChangeHandler(){
var hash = window.location.hash;
if (hash != current){
current = hash;
tabSwitch(hash,$("a[href='" + hash +"']"));
}
}

最后，在body标签上绑定onhashchange事件：

最后，让我们看看最终效果。

当然，onhashchange事件是一个最新的事件，ie6、ie7等并不支持该事件，如果要在这些浏览器中保持良好的用户体验，就得另辟蹊径。 YUI’s History component 和 Really Simple History 都采用了 setInterval 的方式都采用setInterval 的方式来定时比较，待有改变时触发。这种方法并不足取。网上的另一篇文章《Emulating onhashchange without setInterval》提到一种无需定时的跨浏览器解决方案，可兹借鉴。Dojo有一个hash.Js也可以解决同样的问题，可查看http://retchless.com/hash/hash.HTML#@R_404_6004@=blue。 另外，jquery.address.1.1.Js插件可以很方便的读取和修改hash，还是以上面的HTML代码为基础，在页面中引入jquery和jquery.address.1.1.Js。

<script src="jquery-1.3.2.min.Js"></script>
<script src="Js/jquery.address-1.1.Js"></script>HTML的tab标签做如下修改：

<ul class="tabTit">
<li><a href="#item1" rel="address:item1">item1</a></li>
<li><a href="#item2" rel="address:item2">item2</a></li>
<li><a href="#item3" rel="address:item3">item3</a></li>
<li class="last"><a href="#item4" rel="address:item4">item4</a></li>
</ul>

Tab切换函数保持不变，添加以下代码：

$.address.init(function(event) {
if(event.value == "/"){
$(".tabTit a:first").trigger("click");
};
}).change(function(event) {
var tab = (event.value).split("/")[1];
var selection = $('a[rel=address:' +tab + ']');
var obj = selection.attr('href');
$.address.Title($.address.Title().split(' | ')[0] + ' | ' + selection.text());
tabSwitch(obj,selection);
});

查看最终效果

技术的每一次发展更新总会带来少许遗憾，这些遗憾却给了我们更多思考的空间，在我们努力寻求解决方案的同时，更大的促进了技术的发展。AJAX虽然能实现无刷新提交页面，但是却破坏了用户体验。但是onhashchange事件的出现可以弥补刚方法的不足，提升了用户体验，期待其他浏览器能很好的支持该事件。

原文：http://www.denisdeng.com/?p=689

总结

以上是内存溢出为你收集整理的关于onhashchange事件全部内容，希望文章能够帮你解决关于onhashchange事件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。