pushState() und popState(): manipulieren Browser Geschichte

Question

Ich arbeite an einem kleinen Projekt, in dem ich eine Ajax-Stil Website erstellen möchte. Der Inhalt wird mit load() von jQuery geladen. Wie einige von Ihnen wissen, besteht der Nachteil darin, dass sich die URL nicht entsprechend dem angezeigten Inhalt ändert. Damit dies funktioniert, können Sie pushState() verwenden. Da dies nicht browserübergreifend unterstützt wird, habe ich das Plug-in history.js verwendet.

Das funktioniert ganz gut, aber das Problem ist, dass meine Vor- und Zurück-Tasten nicht funktionieren, wie sie sollten und ich habe keine Ahnung, was ich falsch mache. Die URL ändert sich korrekt und der Inhalt ist ebenfalls korrekt, aber der Titel ändert sich nicht. Mit Titel meine ich, was als Titel des Fensters (oder Tabs) des Browserfensters angezeigt wird. I.e. die <title> der Seite, die geladen wird ODER das Titelattribut des Links, der auf diese Seite verweist (sie sind identisch). Ich denke, dass es mit der Tatsache zu tun hat, dass ich nur einen Abschnitt der Seite, deren Titel ich brauche, anrufe (d. H. Indem ich #content zu load() hinzufüge). Ich möchte trotzdem den Titel dieser Seite. Hier ist ein Testfall von dem, was ich bisher habe. (Nicht mehr verfügbar seit 28. Dezember 2013) 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 auch festgestellt, dass, wenn auf die Grundseite zurück (dh/sectionLoaderTest /) es für eine Weile leer wird und erst nach einer Weile Der Inhalt der ersten Seite wird geladen. Gibt es eine Möglichkeit, dies zu optimieren?

Zusätzlich verwende ich jQuery, um eine Active-Klasse zu dem Link hinzuzufügen, der angeklickt wurde. Wie kann ich sicherstellen, dass sich dies entsprechend der Historie ändert? Damit der richtige Link markiert wird, wenn ein Benutzer zurück navigiert?

So sind die drei Fragen sind:

1. den Titel Arbeiten erhalten, sobald geht nach vorn und nach hinten
2. Optimieren Sie die Ladezeit von der Startseite
3. die aktive Klasse Fix, wenn sie vorwärts gehen und rückwärts

Alle helfen willkommen!

HINWEIS 1: Ich möchte auf history.js und meinem eigenen Skript aufbauen und als solches die Unterstützung für < HTML5 Browser beibehalten. Ich würde das bevorzugen, weil 1. Ich weiß, dass das funktionieren muss, da ist nur etwas, was schief läuft. 2. Es würde Zeit sparen, wenn ich eine Lösung sehen und sie in das Skript, das ich bereits geschrieben hätte, implementieren würde, anstatt ein ganz neues Skript zu entwickeln.

ANMERKUNG 2: Das Kopfgeld wird nur an denjenigen vergeben, der alle meine Fragen beantworten kann (3)!

Answer 1

Antwort 1 - Holen Sie sich den Titel zu arbeiten, wenn vorwärts und rückwärts gehen

Soweit ich verstanden Sie den Titel des Dokuments html über den Link ändern möchten in einem div geladen. Wenn Sie eine Datei in einem div über jQuery .load laden, fügen Sie einfach den vollständigen Antworttext nach einer Ajax-Anfrage ein. Also mit all den Sachen, die nicht in einem div wie der title oder meta Tag sein sollte. Allerdings ist der Titel des aktuellen Dokuments (http://bramvanroy.be/sectionLoaderTest/index.html) in der title definiert, die innerhalb der head Tag und nicht in der title Tag innerhalb einer Div ist, so dass der Titel des Dokuments nicht ändert.

Also, wie kann ich es beheben?

Gute Frage, denn das title Element innerhalb eines div Elements ungültig ist, werden die meisten Browser entfernen, damit Sie nicht nur verwenden:

document.title = $("#sectionContainer title").text(); 

weil das title Element kann nicht existieren.

Was wir also brauchen, ist die direkte Antwort von der jQuery .load Funktion. Ich kann es erhalten, indem die Callback-Argument an die Funktion hinzufügen:

$("#sectionContainer") 
    .hide() 
    .load(newLoadedHtml, function(responseText) { 
     document.title = $(responseText).filter("title").text(); 
    }) 
    .fadeIn("fast"); 

Was Sie vielleicht nicht verstehen, warum ich die .filter verwenden und nicht die .find Funktion. Das liegt daran, dass jQuery die Tags html, head und body aus dem HTML-Code analysiert, aber die untergeordneten Elemente nicht entfernt.

Antwort 2 - Optimieren Sie die Ladezeit von der Startseite

Ein Dokument aus nach oben nach unten geladen zu werden.

Also zuerst das CSS, JavaScript etc. sollte geladen werden und dann das Hauptdokument. Weil jQuery immer auf das Dokument wartet, bevor es ausgeführt wird, wäre es keine schlechte Idee, alle Ihre script Elemente direkt vor das Ende des Körpers zu stellen, damit Ihr HTML vorher geladen werden kann.

BtW Ich hatte gerade dieses Problem beim ersten Mal, nachdem alles zwischengespeichert wurde und das Dokument sehr schnell geladen wurde.

Antwort 3 - Befestigen Sie die Aktiv-Klasse, wenn sie vorwärts und rückwärts

gehen würde ich sagen, Schleife, um die href Attribute der a Elemente Trog und mit den Daten aus History.getState() vergleichen. Sollte einfach sein.

Sie haben einige Fehler in Ihrem Code - Ihre festen Code:

Sie den Hash beigefügten #content auf alle URLs .. es macht keinen Sinn, und es wird wieder von jQuery entfernt werden: https://github.com/jquery/jquery/blob/master/src/ajax.js#L617 (Comes von Linien: 158, 190, 337, 617 - rhash ist auf Linie 6)

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

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

    menuLink.click(function(e) { 

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

     var newLoadedHtml = $(this).attr("href"); 

     History.pushState(null, newLoadedHtml, newLoadedHtml); 

     $("#sectionContainer") 
      .hide() 
      .load(newLoadedHtml, function(responseText) { 
       document.title = $(responseText).filter("title").text(); 
      }) 
      .fadeIn("fast"); 
    }); 

    History.Adapter.bind(window, "statechange", function() { 
     menuLink.removeClass("active"); 
     $("a[href='" + History.getState().title + "']").addClass("active"); 
     $('#sectionContainer').load(document.location.href, function(responseText) { 
      document.title = $(responseText).filter("title").text(); 
     }); 
    }); 
}); 

Answer 2

Sie auch Routing-Plugins wie davis.js oder jQuery Pusherkönnten versuchen,https://github.com/salvan13/jquery-pusher