Ich arbeite an einem kleinen Projekt, in dem ich eine Ajax-Website erstellen möchte. Der Inhalt wird mit jQuery geladenload(). Wie einige von Ihnen wissen, ändert sich die URL nicht entsprechend dem angezeigten Inhalt. Damit dies funktioniert, können Sie verwendenpushState(). Da dies nicht browserübergreifend unterstützt wird, habe ich das Plug-In verwendethistory.js.

Das funktioniert ganz gut, aber das Problem ist, dass meine Vor- und Zurück-Tasten nicht wie gewünscht funktionieren und ich keine Ahnung habe, was ich falsch mache. Die URL ändert sich korrekt und der Inhalt auch, aber der Titel ändert sich überhaupt nicht. Mit Titel meine ich den Titel des Fensters (oder der Registerkarte) des Browserfensters. Das heißt das<title> der geladenen Seite ODER das title-Attribut des Links, der auf diese Seite verweist (sie sind identisch). Ich denke, das hat damit zu tun, dass ich nur einen Abschnitt der Seite aufrufe, dessen Titel ich benötige (d. H. Durch Hinzufügen von#content zumload()). Ich möchte trotzdem den Titel dieser Seite. Hier ist ein Testfall von dem, was ich bis jetzt habe. (Seit dem 28. Dezember 2013 nicht mehr verfügbar.) JQuery-Datei:

$(document).ready(function () {
    var firstLink = $("ul > li:first-child > a");
    var menuLink = $("ul > li > a");
    var firstLoadedHtml = firstLink.attr("href") + " #content";

    $("#sectionContainer").hide().load(firstLoadedHtml).fadeIn("fast");
    firstLink.addClass("active");   

    menuLink.click(function(e) {
        history.pushState(null, null, this.href);

        e.preventDefault();
        e.stopImmediatePropagation();

        var CurLink = $(this);
        var newLoadedHtml = CurLink.attr("href") + " #content";
        var oldSection = $(".contentPage");

        $("#sectionContainer").hide().load(newLoadedHtml).fadeIn("fast");
        menuLink.removeClass("active");
        CurLink.addClass("active");
    });

    $(window).bind('popstate', function() {
            var returnLocation = history.location || document.location;

            $('#sectionContainer').load(returnLocation + "#content");
    });
});

Ich habe auch festgestellt, dass beim Zurückkehren zur Basisseite (d. H. / SectionLoaderTest /) eine Weile lang nichts angezeigt wird und erst nach einer Weile der Inhalt der ersten Seite geladen wird. Gibt es eine Möglichkeit, dies zu optimieren?

Darüber hinaus verwende ich jQuery, um dem angeklickten Link eine aktive Klasse hinzuzufügen. Wie kann ich sicherstellen, dass sich dies entsprechend der Historie ändert? Damit der richtige Link hervorgehoben wird, wenn ein Benutzer zurück navigiert?

Die drei Fragen lauten also:

Bring den Titel zum Laufen, wenn du vorwärts und rückwärts gehstOptimieren Sie die Ladezeit der HauptseiteKorrigieren Sie die aktive Klasse, wenn Sie vorwärts und rückwärts gehen

Alle helfen willkommen!

ANMERKUNG 1: Ich möchte auf history.js und meinem eigenen Skript aufbauen und als solches weiterhin Unterstützung für< HTML5 Browser. Ich würde dies vorziehen, weil 1. ich weiß, dass dies funktionieren muss, es gibt nur etwas, was schief geht. 2. Es würde Zeit sparen, wenn ich die eigene Lösung sehen und in das Skript implementieren könnte, das ich bereits geschrieben habe, anstatt ein ganz neues Skript zu entwickeln.

ANMERKUNG 2: Das Kopfgeld wird nur an diejenigen ausgezahlt, die alle meine Fragen beantworten können (3)!