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请求。 从浏览器缓存加载的内容。

请享用！！