webentwicklung-frage-antwort-db.com.de

Ajax, Zurück-Taste und DOM-Updates

Wenn Javascript das DOM in Seite A ändert, navigiert der Benutzer zu Seite B und klickt dann auf die Schaltfläche "Zurück", um zur Seite A zurückzukehren. Alle Änderungen am DOM von Seite A gehen verloren, und dem Benutzer wird die Version angezeigt, die ursprünglich vom Server abgerufen wurde.

Es funktioniert auf diese Weise auf Stackoverflow, Reddit und vielen anderen beliebten Websites. (Versuchen Sie, dieser Frage einen Testkommentar hinzuzufügen, navigieren Sie dann zu einer anderen Seite und klicken Sie auf die Schaltfläche "Zurück", um zurückzukehren. Ihr Kommentar wird "weg" sein.)

Dies ist sinnvoll, aber einige Websites (Apple.com, basecamphq.com usw.) zwingen den Browser, dem Benutzer den neuesten Stand der Seite zu liefern. (Gehen Sie zu http://www.Apple.com/ca/search/?q=iPod , klicken Sie oben auf den Link "Downloads sagen" und dann auf die Schaltfläche "Zurück". Alle DOM-Updates bleiben erhalten.)

woher kommt die inkonsistenz

112
lubos hasko

Eine Antwort: Unter anderem führen Unload-Ereignisse dazu, dass der Back-/Forward-Cache ungültig wird .

Einige Browser speichern den aktuellen Zustand der gesamten Webseite im sogenannten "bfcache" oder "Seiten-Cache". Auf diese Weise können sie die Seite beim Navigieren über die Schaltflächen Zurück und Vor sehr schnell neu rendern und den Status des DOM und aller JavaScript-Variablen beibehalten. Wenn eine Seite jedoch Onunload-Ereignisse enthält, können diese Ereignisse die Seite möglicherweise in einen nicht funktionsfähigen Zustand versetzen. Daher wird die Seite nicht im bfcache gespeichert und muss neu geladen (möglicherweise jedoch aus dem Standardcache geladen) und neu geladen werden. von Grund auf neu gerendert, einschließlich der Ausführung aller Onload-Handler. Wenn Sie über den bfcache zu einer Seite zurückkehren, bleibt das DOM in seinem vorherigen Zustand, ohne dass Onload-Handler ausgelöst werden müssen (da die Seite bereits geladen ist).

Beachten Sie, dass sich das Verhalten des bfcache in Bezug auf Cache-Control und andere HTTP-Header vom Standard-Browser-Cache unterscheidet. In vielen Fällen zwischenspeichern Browser eine Seite im bfcache, auch wenn sie sonst nicht im Standardcache gespeichert würde.

jQuery hängt automatisch ein Entladeereignis an das Fenster an. Wenn Sie also jQuery verwenden, wird Ihre Seite leider nicht mehr im bfcache gespeichert. [Update: dies wurde in jQuery 1.4 behoben, so dass es nur für IE gilt]

105
Miles

Ich habe versucht, Chrome wie Safari zu verhalten, und ich habe nur festgestellt, dass dies funktioniert, indem ich Cache-control: no-store in den Headern. Dadurch wird der Browser gezwungen, die Seite erneut vom Server abzurufen, wenn der Benutzer die Zurück-Taste drückt. Nicht ideal, aber besser als eine veraltete Seite.

14
nornagon

Dies hat nichts mit dem Hash-Symbol (#) zu tun.

Wenn Sie die HTTP-Header von Apple überprüfen möchten, wird die Seite einfach zwischengespeichert.

3
Luca Matteis

Facebook merkt sich den Seitenstatus, indem es die Hash-ID in der URL für Ajax-Anfragen ändert. Diese Änderungen werden im Browserverlauf aufgezeichnet. Wenn der Benutzer auf die Schaltfläche "Zurück" klickt, ändert sich der Hash auf den vorherigen Wert. Dann wird vorausgesetzt, dass Sie Javascript benötigen, um die ID des Has zu überwachen und zu reagieren, wenn sie vom Browser geändert wird. Andreas Blixt hat ein Hash-Überwachungsskript zur Verfügung .

3
Josh Stodola

Die Verwendung der URL-Hash-/Fragment-ID ist eine gängige Methode, um den Status in einer Webanwendung zu speichern, die auf Ajax- und DOM-Updates basiert.

Schauen Sie sich das Really Simple History Projekt für einige Ideen an. Es ist möglich, die URL auf Änderungen am Hash zu überwachen und rsh berücksichtigt dabei die Unterschiede im Browser.

2
Peter

Für alle, die Probleme mit Rails haben und dies - Ihr Problem ist nicht bfcache (ich dachte es war es) - es ist das Juwel turbolinks. hier So entfernen Sie es.

Hoffentlich sparen Sie dadurch etwas Zeit und schlagen Ihren Kopf gegen die Wand.

1
Yuval Karmi

Was Sie suchen, ist eine Art URL-Hash-Verwaltung. Das # in der URL ist nur für die Client-Seite.

Wenn Sie den Status der Rückseite mit JS ändern, aktualisieren Sie die Daten im # der URL.

Außerdem fügen Sie einen Abfragetyp hinzu, der überwacht, ob sich der Hash geändert hat, und den Status der Seite basierend auf den neuen Daten im Hash lädt.

Schau dir das an:

http://ajaxpatterns.org/Unique_URLs

0
BigBlondeViking