onhashchange与AJAX无缝刷新
最近忙着网盘项目的改版,由以前的点击目录跳转到下一页的操作方式,改成直接用ajax无刷新的功能实现,考虑到用户会有可能将当前目的的地址分享给好友,于是在HTML5的history AIP和hash中选择了后者,主要还是html5的兼容性处理起来比较麻烦,虽然hashchange也是不支持IE6、IE7的但是好在IE能识别hash,做起兼容还不是很麻烦。
onhashchange主要是针对ajax无刷新交互所导致的浏览器“返回”按钮无效所产生的,应该还是属于比较新的方法。 当js通过改变hash的方法进行交互的时候,比如说a.html#page=1,这里的‘#page=1’就是hash,通过js改变hash不会出发load事件,所以当点击“返回”按钮时,你会发现除了hash变了以外,其他的没有任何变化。所以此时就要用到onhashchange方法,当用户点击“返回”的时候捕捉变化后的hash然后进行相应的操作。
先看兼容性 Internet Explorer 8+
Firefox 3.6+
Chrome 5+
Safari 5+
Opera 10.6+
基本上除了IE6、7外问题不大,贴出方法。
(function() {
if ('onhashchange' in window) {
//if browser support onhaschange 如果浏览器支持onhaschange事件
if (window.addEventListener) {
window.addHashChange = function(func, before) {
window.addEventListener('hashchange', func, before);
};
window.removeHashChange = function(func) {
window.removeEventListener('hashchange', func);
};
return;
} else if (window.attachEvent) {
window.addHashChange = function(func) {
window.attachEvent('onhashchange', func);
};
window.removeHashChange = function(func) {
window.detachEvent('onhashchange', func);
};
return;
}
}
//if the browser not support onhaschange 如果不支持的话
var hashChangeFuncs = [];
var oldHref = location.href;
window.addHashChange = function(func, before) {
if ( typeof func === 'function')
hashChangeFuncs[before ? 'unshift': 'push' ](func);
};
window.removeHashChange = function(func) {
for (var i = hashChangeFuncs.length - 1; i >= 0; i--)
if (hashChangeFuncs[i] === func)
hashChangeFuncs.splice(i, 1);
};
//!!inportant!! 用setInterval检测has的改变
setInterval(function() {
var newHref = location.href;
if (oldHref !== newHref) {
oldHref = newHref;
for (var i = 0; i < hashChangeFuncs.length; i++) {
hashChangeFuncs[i].call(window, {
'type' : 'hashchange',
'newURL' : newHref,
'oldURL' : oldHref
});
}
}
}, 100);
})();
// Usage, infinitely many times: 使用方法
addHashChange(function(e) {
alert(e.newURL || location.href);
});
方法中如果原生的事件支持的话,调用原生事件,如果不支持的话用setInterval检测,似乎有不用setInterval的方法,本来想查查的,结果google最近被GFW封杀的厉害,度娘又不给力,所以木有找到详细的做法,如果你有发现,别忘了下面分享一下~~
300100
HI, THERE!I AM MOFEI