Was js sollte ich Tastenklicks behandeln zurück, während onPopState und pushstate

Question

mit Ich verwende pushstate, um die URL einer Website zu ändern:

history.pushState("", "info", "/info"); 

die großen Werke, aber jetzt ist die Taste wieder nicht Arbeit. Ich glaube, dass ich mein eigenes Vorwärts- und Zurück-Tastenverhalten mit onPopState schreiben muss, das den Verlaufsstapel durchläuft und die entsprechende Seite rendert. Der Trick ist, dass, wenn "Zurück" Null ist, es die Sache tun sollte, die der Zurück-Knopf normalerweise tun würde (gehe zurück zur Seite, bevor der Benutzer meine Seite betrat).

Das scheint ziemlich Standard-Verhalten, gibt es ein Rezept/einige Standard-Code, den ich verwenden könnte?

Answer 1

Ah ich mit einer Lösung kam, nicht so schwer wie ich dachte (im Grunde nutzt einfach die URL Pfadname das Zeug zu machen):

// Makes the back button work 
window.onpopstate = function(event) { 
    if (document.location.pathname == '/main') { 
     $("#main").show(); 
     $("#info").hide(); 
     $("#settings").hide(); 
    } 
    if (document.location.pathname == '/info') { 
     alert('info'); 
     $("#main").hide(); 
     $("#info").show(); 
     $("#settings").hide(); 
    } 
    if (document.location.pathname == '/settings') { 
     alert('settings'); 
     $("#main").hide(); 
     $("#info").hide(); 
     $("#settings").show(); 
    } 
}; 

Answer 2

Seltsam, dass die Zurück-Taste nicht funktioniert für Sie. Ich benutze History.js, die eine rückwärtskompatible Erfahrung für alle nicht HTML5-Browser bietet, und ich habe dieses Problem in keinem der Browser oder Test-Suites erlebt ... Vielleicht möchten Sie das ausprobieren?

Answer 3

Ich glaube nicht, dass Sie etwas tun müssen sich die Zurück- und Vorwärts-Taste Verhalten nach der Verwendung von pushstate, es nach wie vor funktionieren sollte noch zu implementieren, aber es wird popstate auslösen, anstatt eine HTTP-Anforderung machen usw.

Ich verwende Davis.js, um etwas Ähnliches zu erreichen, was Sie haben, bestimmte OnPopstate-Ereignisse zum Verhalten zu leiten, überprüfen Sie es.

Answer 4

Ohne Rahmen ist es einfach:

window.onpopstate = function(event){ 
    // do something 
} 

Answer 5

ich auf dieses Problem nur gekommen sind, mich, und ich glaube, ich herausgefunden, warum es nicht funktioniert.

Die Dokumentation scheint zu diesem Thema sehr vage zu sein. Das, was ich gelesen habe, besagt, dass Sie eine leere Zeichenfolge (oder ein leeres Objekt) in den Zustandsparameter eingeben können (wie in Ihrem Beispiel).

history.pushState("", "info", "/info"); 

Wenn ich dies tun, (Tests in beiden Chrome und Firefox), die „Zurück“ und „Vorwärts“ Tasten funktionieren, in dem Sinne, dass sie den Link in Ihrem Browser-Adressleiste ändern. Aber das ist alles, was sie tun - die mit dem Link verknüpfte Seite lädt nicht!

dies So, jetzt versuchen:

history.pushState({state: dummyState}, "info", "/info"); 

Nun wird die „Zurück“ und „Vorwärts“ Tasten scheinen wie ich sie erwarten würde zu arbeiten. Es ist so, als würde der Browser sagen: "Wenn es keinen 'Status' gibt, an den ich mich klammern kann, werde ich die Seite nicht laden."

Angesichts der Tatsache, dass es in Firefox und Chrome funktioniert die gleiche Weise, ich denke, das ist eine dokumentierte Funktion. Aber wenn es so ist, ist es tiefer vergraben, als ich suchen möchte.