Wypróbowuję interfejs API historii HTML5 z ładowaniem zawartości przez ajax.

Mam kilka stron testowych połączonych odnośnikami względnymi. Mam ten JS, który obsługuje kliknięcia tych linków. Po kliknięciu łącza program obsługi chwyta jego atrybut href i przekazuje go do ajaxLoadPage (), który ładuje zawartość z żądanej strony do obszaru zawartości bieżącej strony. (Moje strony PHP są skonfigurowane tak, aby zwracały pełną stronę HTML, jeśli żądasz ich normalnie, ale tylko fragment zawartości, jeśli? Fragment = true jest dołączany do adresu URL żądania).

Następnie mój program obsługi kliknięć wywołuje history.pushState (), aby wyświetlić adres URL w pasku adresu i dodać go do historii przeglądarki.

$(document).ready(function(){

    var content = $('#content');

    var ajaxLoadPage = function (url) {
        console.log('Loading ' + url + ' fragment');
        content.load(url + '?fragment=true');
    }

    // Handle click event of all links with href not starting with http, https or #
    $('a').not('[href^=http], [href^=https], [href^=#]').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');
        ajaxLoadPage(href);
        history.pushState({page:href}, null, href);

    });

    // This mostly works - only problem is when popstate happens and state is null
    // e.g. when we try to go back to the initial page we loaded normally
    $(window).bind('popstate', function(event){
        console.log('Popstate');
        var state = event.originalEvent.state;
        console.log(state);
        if (state !== null) {
            if (state.page !== undefined) {
                ajaxLoadPage(state.page);
            }
        }
    });

});

Kiedy dodajesz adresy URL do historii za pomocą pushState, musisz także dołączyć obsługę zdarzeń dla zdarzenia popstate, aby poradzić sobie z kliknięciami przycisków wstecz lub do przodu. (Jeśli tego nie zrobisz, kliknięcie wstecz spowoduje wyświetlenie adresu URL, który został przesunięty do historii w pasku adresu, ale strona nie jest aktualizowana.) Więc mój program obsługi popstate pobiera adres URL zapisany we właściwości stanu każdego wpisu, który utworzyłem, i przekazuje go do ajaxLoadPage, aby załadować odpowiednią treść.

Działa to poprawnie dla stron dodanych do historii przez mój program obsługi kliknięć. Ale co dzieje się ze stronami dodanymi przez przeglądarkę do historii, kiedy poprosiłem o nie „normalnie”? Powiedz, że ląduję na mojej pierwszej stronie normalnie, a następnie przechodzę przez moją stronę za pomocą kliknięć, które powodują ładowanie ajaxów - jeśli następnie spróbuję wrócić do historii do tej pierwszej strony, ostatnie kliknięcie wyświetli adres URL pierwszej strony, ale nie nie ładuj strony w przeglądarce. Dlaczego?

Widzę, że ma to coś wspólnego z właściwością state tego ostatniego zdarzenia popstate. Właściwość state ma wartość null dla tego zdarzenia, ponieważ są to tylko wpisy dodane do historii przez pushState () lub replaceState (), które mogą nadać jej wartość. Ale moje pierwsze załadowanie strony było „normalnym” żądaniem - skąd przeglądarka nie cofnęła się i załadowała początkowy adres URL normalnie?