Ich probiere die HTML5-Protokoll-API mit Ajax-Laden von Inhalten aus.

Ich habe eine Reihe von Testseiten, die durch relative Links verbunden sind. Ich habe diese JS, die Klicks auf diese Links behandelt. Wenn auf einen Link geklickt wird, erfasst der Handler sein href-Attribut und übergibt es an ajaxLoadPage (), das den Inhalt der angeforderten Seite in den Inhaltsbereich der aktuellen Seite lädt. (Meine PHP-Seiten sind so eingerichtet, dass sie eine vollständige HTML-Seite zurückgeben, wenn Sie sie normal anfordern, aber nur ein Teil des Inhalts, wenn? Fragment = true an die URL der Anforderung angehängt wird.)

Dann ruft mein Click-Handler history.pushState () auf, um die URL in der Adressleiste anzuzeigen und sie dem Browserverlauf hinzuzufügen.

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

});

Wenn Sie mit pushState URLs zum Verlauf hinzufügen, müssen Sie auch einen Ereignishandler für das popstate-Ereignis einschließen, um Klicks auf die Schaltflächen Zurück oder Vorwärts zu verarbeiten. (Wenn Sie dies nicht tun, wird durch Klicken auf "Zurück" die URL angezeigt, die Sie in der Adressleiste in den Verlauf verschoben haben, die Seite wird jedoch nicht aktualisiert.) Mein Popstate-Handler ermittelt daher die URL, die in der state-Eigenschaft jedes von mir erstellten Eintrags gespeichert ist. und übergibt es an ajaxLoadPage, um den entsprechenden Inhalt zu laden.

Dies funktioniert einwandfrei für Seiten, die mein Click-Handler dem Verlauf hinzugefügt hat. Aber was passiert mit Seiten, die der Browser dem Verlauf hinzugefügt hat, als ich sie "normal" angefordert habe? Angenommen, ich lande normal auf meiner ersten Seite und navigiere dann mit Klicks, die das Ajax-Laden bewirken, durch meine Website. Wenn ich dann versuche, durch den Verlauf zu dieser ersten Seite zurückzukehren, zeigt der letzte Klick die URL für die erste Seite, aber nicht lade die Seite nicht in den Browser. Warum das?

Ich kann irgendwie sehen, dass dies etwas mit der state-Eigenschaft dieses letzten Popstate-Ereignisses zu tun hat. Die state -Eigenschaft ist für dieses Ereignis null, da nur Einträge, die von pushState () oder replaceState () zum Verlauf hinzugefügt wurden, dem Ereignis einen Wert zuweisen können. Aber mein erstes Laden der Seite war eine "normale" Anfrage - warum tritt der Browser nicht einfach zurück und lädt die ursprüngliche URL normal?