Ajax с историей.pushState и popstate-что делать, когда свойство popstate state равно null?

это более старый вопрос, но есть гораздо более простой ответ с использованием собственного javascript для этой проблемы.

для начального состояния вы не должны использовать history.pushState а history.replaceState.

все аргументы одинаковы для обоих методов с той лишь разницей, что pushState создает новую запись истории и, таким образом, является источником вашей проблемы. replaceState только заменяет состояние этой записи истории и будет вести себя так, как ожидалось, то есть вернуться к исходному стартовая страница.

я столкнулся с той же проблемой, что и исходный вопрос. Эта строка

var initialPop = !popped && location.href == initialURL;

следует заменить на

var initialPop = !popped;

этого достаточно, чтобы поймать начальный поп. Тогда вам не нужно добавлять исходную страницу в pushState. т. е. удалить следующее:

var home = 'index.html';
history.pushState({page:home}, null, home);

окончательный код на основе вкладок AJAX (и с использованием Mootools):

if ( this.supports_history_api() ) {
    var popped = ('state' in window.history && window.history.state !== null)
    ,   changeTabBack = false;

    window.addEvent('myShowTabEvent', function ( url ) {
       if ( url && !changingTabBack )
           setLocation(url);
       else
           changingTabBack = false;
       //Make sure you do not add to the pushState after clicking the back button
    });

   window.addEventListener("popstate", function(e) {
       var initialPop = !popped;
       popped = true;
       if ( initialPop )
           return;

       var tabLink = $$('a[href="' + location.pathname + '"][data-toggle*=tab]')[0];
       if ( tabLink ) {
           changingTabBack = true;
           tabLink.tab('show');
       }
   });
}

Я на самом деле нашел себя с аналогичной потребностью сегодня и нашел код, который вы предоставили, очень полезным. Я пришел к той же проблеме, что и вы, и я считаю, что все, что вам не хватает, это толкать свой индексный файл или домашнюю страницу в историю так же, как вы все последующие страницы.

вот пример того, что я сделал, чтобы решить эту проблему (не уверен, что это правильный ответ, но это просто и работает!):

var home = 'index.html';
history.pushState({page:home}, null, home);

надеюсь, что это помогает!

Я понимаю, что это старый вопрос, но при попытке легко управлять состоянием, как это, может быть, лучше принять следующий подход:

$(window).on('popstate',function(e){
    var state = e.originalEvent.state;
    if(state != null){
        if(state.hasOwnProperty('window')){
            //callback on window
            window[state.window].call(window,state);
        }
    }
});

таким образом, вы можете указать необязательную функцию обратного вызова на объекте состояния при добавлении в историю, а затем, когда popstate является триггером, эта функция будет вызываться с объектом состояния в качестве параметра.

function pushState(title,url,callback)
{
    var state = {
        Url : url,
        Title : title,
    };
    if(window[callback] && typeof window[callback] === 'function')
    {
        state.callback = callback;
    }
    history.pushState(state,state.Title,state.Url);
}

вы можете легко расширить это в соответствии с вашими потребностями.

И Наконец говорит:

Я бы подумал, что браузер будет рад вернуться к записи, которая была создана обычным запросом.

Я нашел объяснение поведения этого странного браузера здесь. Объяснение

вы должны сохранить состояние, когда ваш сайт загружается в первый раз и после этого каждый раз, когда он меняет состояние

Я проверил это - работает.

Это означает, что нет необходимости в загрузка содержимого на основе окна.местоположение.

надеюсь, я не введу вас в заблуждение.