Question

当我使用以下内容时，似乎再也回不去一次了。我从这里尝试了一些建议：

HTML5 history API: cannot go backwards more than once

但是，它没有帮助。有什么想法吗？

<script>

    $(function () {
        var popped = ('state' in window.history && window.history.state !== null),
            initialURL = location.href;

        //function to handle the scenarios where back and forward buttons used in browser
        $(window).bind("popstate", function (e) {
            // Ignore inital popstate that some browsers fire on page load
            var initialPop = !popped && location.href == initialURL;
            popped = true;
            if (initialPop) {
                return;
            }
            ajaxLoadPage(location.href);
        }); 


            //the ajax function that does the AJAX calls to get the products and load them into the grid
        var ajaxLoadPage = function (url) {
            update_flavors_and_collection(url)
        }




    });

function update_flavors_and_collection(ajax_page){
$("#collection_and_filters").load(ajax_page+" #collection_and_filters", ajax=true, update_history(ajax_page));  
}

function update_history(url){
  if (!history.state || history.state.page!=url)
  history.pushState({ "page": url }, '', url);
}

</script>

Answer 1

您链接的问题的第一个答案是实际发生在您身上的事情。您必须仔细阅读并更好地理解它。

您从历史记录中弹出一个项目，然后加载当前历史记录项目并将其再次推送到历史记录，因此历史记录中有两次相同的项目。

弹出历史记录项目并加载新项目时，请勿将最后一个项目再次推送到历史记录中，因为当前历史记录项目就是您要推送的项目。

您可以检查最后一个历史记录项目，看是否相同，并避免将其推送，或者可以在加载项目时由于弹出而传递一个标志，以避免推送它。最后一个选项是最简单的。

例如：

$(window).bind("popstate", function (e) {
    [...]
    ajaxLoadPage(location.href, true); // Notice the second argument
});

var ajaxLoadPage = function (url, isPopState) {
    update_flavors_and_collection(url, isPopState);
}

function update_flavors_and_collection(ajax_page, isPopState){
    $("#collection_and_filters").load(ajax_page+" #collection_and_filters", 
    ajax=true, update_history(ajax_page, isPopState));  
}

function update_history(url, isPopState){
    if (!isPopState && (!history.state || history.state.page!=url))
    history.pushState({ "page": url }, '', url);
}

History.pushstate不能再返回一次

1 个答案: