Question

从此链接点击后，我找到了恢复上一页的方法。 JQuery & history.js back button not working

但是当我在ajax目标页面上重新加载时，初始状态再次设置初始状态，我无法单击返回按钮一次返回。

分步测试：

在主页上
点击第1页以使用ajax页面。
点击ajax链接（第2 - 4页）
javascript ajax请求目标页面并正确显示。
点击重新加载/刷新按钮
点击回........什么都没发生。你在同一页上。
再次点击回来。现在你在第1页上，这是正确的，但必须再次点击两次。

如何防止history.js双击返回？（它应该点击一次。）

如果您不了解其工作原理或希望查看代码，请下载我的网页＆amp;码。 http://www.megafileupload.com/en/file/513749/ajax-history-js-zip.html
查看页面的某些部分＆amp;代码：看看这个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请求。

方法2：

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

享受!!

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

1 个答案:

方法1：

方法2：