History.js 如何防止在重新加载的页面上双击返回？

Question

当从这个链接点击返回时，我找到了恢复上一页的方法。 JQuery & history.js back button not working

但是当我在 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

您可以通过两种方法解决问题：

方法一：

修改部分代码为

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

享受！！