Jquery Ajax HTML5 History Issue - кнопка "Назад" не работает для исходной страницы

Question

Я написал скрипт навигации jquery, который заменяет содержимое внутри div, используя .load, Я также использую HTML5 History API с pushstate и popstate.

$(document).ready(function(){

$('.menu_top').on('click', function(e) {
    $("#loading").show();
    var href = $(this).attr('href');
    history.pushState({url: href}, '', href);
    $('#contentwrapper').fadeOut('normal').hide().load(href + " #contentwrapper > *");
    $('#contentwrapper').waitForImages(function() {
    $(this).fadeIn('slow');  
});

    $(document).ajaxSuccess(function() {
  $("#loading").delay(1000).fadeOut();
});

});
    var popped = ('state' in window.history), initialURL = location.href;
    $(window).bind('popstate', function(event){
    var initialPop = !popped && location.href == initialURL;
    popped = true;
    if ( initialPop ) return;
    var state = event.originalEvent.state;

    $('#contentwrapper').load(state.url + " #contentwrapper > *");
});

});

Код в основном работает, и кнопки браузера "назад" и "вперед" работают нормально, пока вы не нажмете "назад" в браузере, чтобы перейти на исходную страницу, которую вы посетили. Например:

Начало на странице 1

Нажмите на ссылку на страницу 2 - работает

Нажмите на ссылку на страницу 3 - работает

Нажмите "назад" для страницы 2 - работает

Нажмите "назад" для страницы 1 - НЕ РАБОТАЕТ

...

Консоль выдает следующее сообщение:

Uncaught TypeError: Cannot read property 'url' of null

Это мой первый опыт popstate, Как я могу заставить браузер вернуться на исходную страницу? Я надеюсь, что объяснил проблему достаточно хорошо. Любая помощь будет оценена!

Вот демонстрация проблемы, если вы хотите увидеть ее в действии.

Answer 1

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

    <script type="text/javascript">

    var initialURL;
    var popped = (window.history.state != null), initialURL = location.href;

    window.onpopstate = function(event) {
    var counter =0;
     var everPushedSomething = false;

     var initialLoad= document.getElementById('hdninitload').value;

     var onloadPop = !everPushedSomething && location.href == initialURL ;

    if(onloadPop){counter = 1;}
    if(initialLoad == 'true'){counter = counter + 1;}


      everPushedSomething = true;
     if (counter != 2) { window.open(location.href, '_self'); }

     }  


    })(window);


    </script>


    <input id="hdninitload" type="hidden" value="true" />

    and Whenever I call history.PushState method,  set this hdninitialload control value to false. something like below:

    history.PushState('','title of the Page','/newPage.aspx'); document.getElementById('hdninitload').value = 'false';

    Hope this works for you as well.