Browser Zurück-Schaltfläche ändert dynamische URL Parameter

Question

Ich arbeite auf einer Website, wo URL-Parameter basierend auf Benutzeraktion aktualisiert wird, nach der ich die Webseite ohne Aktualisierung aktualisieren. Betrachten Sie das E-Commerce-Szenario, in dem sich die URL ändert, wenn der Benutzer auf Filter klickt und dann aktualisierte Produkte angezeigt werden.

Jetzt ist das Problem, wenn Benutzer auf Browsers Zurückknopf klickt, geht der Browser zurück zum vorherigen URL-Parameter, aber Seite wurde nicht geändert. Ich möchte die Seite auch basierend auf dem URL-Parameter ändern, der nach dem Klicken auf die Zurück-Schaltfläche geändert wird.

ich diese Lösung versucht:

$($window).on('popstate', function (e) { 
    // Update the page also 
}); 

Das Problem mit diesem Code wird dies als url Änderungen gefeuert wird, bedeutet es nicht darum schert, wenn Browser geklickt Zurück-Taste, oder URL ändert sich die Verwendung von jQuery. Also, wenn ich URL basierend auf Benutzerinteraktion ändern, wird der Popstate Callback aufgerufen und meine benutzerdefinierte Funktion auch. Um die Seite zu aktualisieren, verwende ich https-Anfragen, also wird http api zweimal aufgerufen.

Gibt es eine Möglichkeit zu überprüfen, ob nur "Zurück" geklickt wird?

Answer 1

Ich würde Ihnen empfehlen, Ihr Design ein wenig zu ändern und alle Content-Updates (die Produktliste in Ihrem Fall) auszulösen, indem Sie URL-Änderungen abhören, nicht nur URL-Änderungen, die durch die Zurück-Schaltfläche verursacht werden. Anstatt also ein erneutes Rendern bei Klickereignissen auszulösen, sollten diese Schaltflächen eine normale Verknüpfung mit der URL sein, die Ihren Inhalt darstellt, und die Funktionalität aus dem Ereignis "Popstate" auslösen.

Dies ist, wie alle MVVM-Frameworks wie Angular.js, Backbone usw. entworfen und verwendet werden sollen.

Dadurch wird es auch so viel einfacher für Sie, die Anwendung auf lange Sicht zu pflegen.

Viel Glück!