History.pushstate не может вернуться больше одного раза

Question

Когда я использую следующее, я не могу вернуться больше одного раза.Я попробовал рекомендации отсюда:

API истории HTML5: не может вернуться назад более одного раза

Однако, это не помогло.Есть идеи?

<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);
}