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封杀的厉害,度娘又不给力,所以木有找到详细的做法,如果你有发现,别忘了下面分享一下~~

Write a response...
Mofei Zhu
publish
剧中人
2014-07-27 01:28
‘于是在HTML5的history AIP和hash中选择了后者’,小纠正一下,如果没猜错的话,这里指的应该是‘API’对吧!
0
 Replay
@剧中人  
Replay
Mofei
2014-07-15 09:04
@上古卷轴ol 可以通过逗号分割,如#skill=43,5,6,234,7。然后去到skill后面的值,进行split(,),这样就会得到技能的数组[43,5,6,234,7],剩下的你懂的。。:)
0
 Replay
@Mofei  
Replay
上古卷轴ol
2014-07-04 10:55
我想做一个游戏技能模拟器,它是用url的#记录用户游戏技能的加点配方。 请楼主提供一个思路。
0
 Replay
@上古卷轴ol  
Replay