Ajax, bouton de retour et mises à jour DOM

si javascript modifie DOM dans la page a, l'utilisateur navigue vers la page B et clique sur le bouton Retour pour revenir à la page A. Toutes les modifications à DOM de la page a sont perdues et l'utilisateur est présenté avec la version qui a été initialement récupéré à partir du serveur.

il fonctionne de cette façon sur stackoverflow, reddit et de nombreux autres sites Web populaires. (essayez d'ajouter un commentaire de test à cette question, puis naviguez vers une page différente et appuyez sur le bouton Retour pour revenir - votre commentaire sera " parti")

cela a du sens, mais certains sites web (apple.com, basecamphq.com etc) sont en quelque sorte forcer le navigateur pour servir l'utilisateur le dernier état de la page. (passez à http://www.apple.com/ca/search/?q=ipod , cliquez sur le lien say Downloads en haut puis sur le bouton back - toutes les mises à jour DOM seront préservées)

d'où vient l'incohérence?

108
demandé sur BigBlondeViking 2009-07-28 21:05:49
la source

7 ответов

Une seule réponse: Entre autres choses, décharger des événements provoquer l'arrière/vers l'avant du cache afin d'être invalidée .

Certains navigateurs stockent l'état actuel de l'ensemble de la page web dans la soi-disant "bfcache" ou "page cache". Cela leur permet de restituer la page très rapidement lors de la navigation via les boutons back et forward, et préserve l'état du DOM et de toutes les variables JavaScript. Cependant, lorsqu'une page contient des événements onunload, ces événements pourrait potentiellement mettre la page dans un état non fonctionnel, et donc la page n'est pas stockée dans le bfcache et doit être rechargée (mais peut être chargée à partir du cache standard) et rendue à partir de zéro, y compris l'exécution de tous les gestionnaires onload. En retournant à une page via le bfcache, le DOM est maintenu dans son état précédent, sans avoir besoin de tirer sur les gestionnaires onload (parce que la page est déjà chargée).

notez que le comportement du bfcache est différent du standard cache de navigateur en ce qui concerne Cache-Control et autres en-têtes HTTP. Dans de nombreux cas, les navigateurs vont mettre en cache une page dans le bfcache même si elle ne le stockerait pas dans le cache standard.

jQuery attache automatiquement un événement de déchargement à la fenêtre, donc malheureusement l'utilisation de jQuery disqualifiera votre page d'être stocké dans le bfcache pour la conservation DOM et de retour/avant rapide . [Mise à jour: ceci a été corrigé dans jQuery 1.4 de sorte qu'il s'applique à IE]

104
répondu Miles 2010-11-10 13:29:43
la source

J'ai essayé de faire en sorte que Chrome se comporte comme le fait Safari, et le seul moyen que j'ai trouvé qui fonctionne est de mettre Cache-control: no-store dans les en-têtes. Cela force le navigateur à récupérer la page du serveur lorsque l'utilisateur appuie sur le bouton Précédent. Pas idéal, mais mieux que d'être montré une page périmée.

12
répondu nornagon 2013-01-21 00:25:39
la source

Facebook se souvient de l'état de la page en modifiant l'Identificateur de hachage dans L'URL pour les requêtes ajax. Ces changements sont enregistrés dans l'historique du navigateur, de sorte que lorsque l'utilisateur clique sur le bouton Précédent, le hachage change à ce qu'il était avant. Donc, il est implicite que vous aurez besoin de Javascript pour surveiller l'identificateur has et réagir quand il est modifié par le navigateur. Andreas Blixt a un script de surveillance de hachage disponible .

3
répondu Josh Stodola 2009-07-28 21:20:45
la source

cela n'a rien à voir avec le symbole hash ( # ).

si vous voulez vérifier les en-têtes HTTP d'apple, c'est simplement mettre la page en cache.

3
répondu Luca Matteis 2009-07-28 21:47:02
la source

L'utilisation du hachage D'URL/l'Identificateur de fragment est un moyen assez courant de hook/remember state dans une application web qui s'appuie sur Ajax et DOM mises à jour.

consultez le histoire vraiment Simple projet pour quelques idées. Il est possible de surveiller L'URL pour les modifications au hachage, et rsh le fait, en tenant compte des différences de navigateur.

2
répondu Peter 2009-07-28 21:34:52
la source

pour toute personne ayant des problèmes avec Rails et ceci -- votre problème n'est pas bfcache (je pensais que c'était) -- c'est la gemme turbolinks . ici est la façon de l'enlever.

ça vous fera gagner du temps et vous cogner la tête contre le mur.

1
répondu Yuval Karmi 2014-09-27 18:15:01
la source

ce que vous recherchez est pour un certain type de gestion de hachage D'URL. Le # dans l'url est réservé au côté client.

lorsque vous changez l'état du dos avec JS, puis vous mettez à jour les données dans le # de l'url.

vous ajoutez aussi un type de polling qui surveille si le hash a changé, et charge l'état de la page basée sur les nouvelles données dans le hash.

regardez ça:

http://ajaxpatterns.org/Unique_URLs

0
répondu BigBlondeViking 2009-07-28 21:16:38
la source

Autres questions sur javascript ajax firefox