History.js如何防止雙擊重新加載的頁面？

Question

從此鏈接單擊返回時，我找到了恢復上一頁的方法。 jQuery＆history.js后退按鈕不起作用

但是，當我在ajax目標頁面上重新加載時，初始狀態再次設置為初始狀態，並且我無法單擊“返回”按鈕一次返回。

分步測試：

1. 在首頁上
2. 單擊第1頁以使用Ajax頁面。
3. 單擊ajax鏈接（第2-4頁）
4. javascript ajax請求目標頁面並正確顯示。
5. 點擊刷新/刷新按鈕
6. 單擊返回.....沒有任何反應。 您在同一頁面上。
7. 再次單擊返回。 現在您位於正確的頁面1上，但必須單擊兩次。

如何防止history.js雙擊返回以返回？ （應該單擊一次。）

如果您不了解它的工作原理或想查看代碼，請下載我的頁面和代碼。 http://www.megafileupload.com/en/file/513749/ajax-history-js-zip.html
要查看頁面和代碼的某些部分：請參閱此JSFiddle 。

function ajaxPushUrl(thisobj) {
    if ($('body').find('.ajax-content-column').length != 0) {
        // current page has certain class.
        var thisurl = thisobj.attr('href');

        History.pushState({ajaxContentColumn:$('.ajax-content-column').html()}, thisobj.text(), thisurl);

        return false;
    }
}


function updatePage(data, url) {
    if ($('body').find('.ajax-content-column').length == 0) {
        // has NO certain class, use normal page request.
        window.location.href=url;

        return true;
    }

    if (url.toLowerCase().indexOf('page') >= 0) {
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            success: function(data) {
                $('.ajax-content-column').html(data);

                return false;
            }
        });
    } else {
        $('.ajax-content-column').html(data.ajaxContentColumn);
    }
}


$(function() {
    if ($('body').find('.ajax-content-column').length != 0) {
        // current page has certain class.
        if (History.enabled) {
            State = History.getState();

            // from pushState below, when you are on ajax requested page and reload page, it must double back click to go back.
            History.pushState({ajaxContentColumn:$('.ajax-content-column').html()}, $('title').text(), State.url);
        }

        // on state change, call update page js function.
        History.Adapter.bind(window,'statechange',function(){
            var State = History.getState();
            updatePage(State.data, State.url);
        });
    }
});

Answer 1

您可以通過兩種方法解決問題：

方法1：

修改部分代碼為

$(function() {
    History.Adapter.bind(window,'statechange',function(){
        var State = History.getState();
        updatePage(State.data, State.url);
    });
});

代替

$(function() {
    if ($('body').find('.ajax-content-column').length != 0) {
        // current page has certain class.
        if (History.enabled) {
            State = History.getState();

            // from pushState below, when you are on ajax requested page and reload page, it must double back click to go back.
            History.pushState({ajaxContentColumn:$('.ajax-content-column').html()}, $('title').text(), State.url);
        }

        // on state change, call update page js function.
        History.Adapter.bind(window,'statechange',function(){
            var State = History.getState();
            updatePage(State.data, State.url);
        });
    }
});

更新 ：僅當我們不在同一頁面上時，才更新ajaxPushUrl函數以進行更新。

function ajaxPushUrl(thisobj) {
    if ($('body').find('.ajax-content-column').length != 0) {
        // current page has certain class.
        var thisurl = thisobj.attr('href');

        if(window.location.href.split('/').pop() != thisurl) { //update only we are not on same page
            History.pushState({ajaxContentColumn:$('.ajax-content-column').html()}, thisobj.text(), thisurl);
        }

        return false;
    }
}

用這種方法，當您單擊ajax鏈接或瀏覽歷史記錄時，將調用ajax請求。

方法二：

$(function() {
    var clicked = false;

    function updatePage(data, url) {
        if ($('body').find('.ajax-content-column').length == 0) {
            // has NO certain class, use normal page request.
            window.location.href=url;
        }

        if(typeof data.ajaxContentColumn != 'undefined') {
            $('.ajax-content-column').html(data.ajaxContentColumn);
            return false;
        }

        fetchContent(url);
    }

    function fetchContent(url) {
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            success: function (data) {
                $('.ajax-content-column').html(data);
                clicked = true;
                History.pushState({ajaxContentColumn: $('.ajax-content-column').html()}, '', url);
            }
        });
    }

    $(".ajax-link").click(function(e) {
        if($('body').find('.ajax-content-column').length == 0) {
            return true;
        }

        e.preventDefault();

        var url = $(this).attr('href');

        fetchContent(url);
    });

    History.Adapter.bind(window,'statechange',function(){

        if(clicked) {
            clicked = false;
            return;
        }
        var State = History.getState();
        updatePage(State.data, State.url);
    });
});

並從鏈接中刪除onclick=\\"return ajaxPushUrl($(this));\\" 。

通過這種方法，您可以在瀏覽歷史記錄時保存一些ajax請求。 從瀏覽器緩存加載的內容。

請享用！！