onhashchange with AJAX Seamless Refresh

Sorry, this article is not written in English and has not been translated into English yet .You can view this article in English with Google Translate, or please come back later.

最近忙着网盘项目的改版,由以前的点击目录跳转到下一页的操作方式,改成直接用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封杀的厉害,度娘又不给力,所以木有找到详细的做法,如果你有发现,别忘了下面分享一下~~

295380
  • logo
    • HI, THERE!I AM MOFEI

      (C) 2010-2024 Code & Design by Mofei

      Powered by Dufing (2010-2020) & Express

      IPC证:沪ICP备2022019571号-1