hashchange實現ajax無刷新回退

hashchange,一提hash前端GG、MM們都不稀奇,但是hashchange就鮮有人知了

在一次面試過程中面試官問道這麼樣實現ajax回退,這個問題當時悶了,下面附上具體代碼,以備後用:

    <div id="nihao"></div>
    <button>change</button>

var i=0, url;
    
    var show = function(num) {
        if (num == 0) {
            url = "data/data_1.json";
        } else if (num == 1) {
            url = "data/data_2.json";
        }
        $.get(url,{"cache":false}, function(result) {
            $("#nihao").text(result.code);
        },"json");
    };
    
    if(window.attachEvent) {
        window.attachEvent("onhashchange", function(e) {
            var hash = parseInt(window.location.hash.substring(1,2), 10);
            show(hash);
        });
    } else if(window.addEventListener) {
        window.addEventListener("hashchange",function(e) {
            var hash = parseInt(window.location.hash.substring(1,2), 10);
            show(hash);
        }, false);
    }
    
    $("button").click(function() {
        
        if(i == 1) {
            window.location.hash = i--;
        } else if(i == 0) {
            window.location.hash = i++;
        }
    });

支持ie8+、chrome、firefox

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章