Ajax, bouton de retour et DOM mises à jour

Question

Si javascript modifie le DOM de la page, l'utilisateur accède à la page B et frappe, puis bouton retour pour revenir à la page A. Toutes les modifications apportées à DOM d'Une page sont perdus et l'utilisateur est présenté avec la version qui a été à l'origine récupérées à partir du serveur.

Il fonctionne de cette manière sur stackoverflow, reddit, et de nombreux autres sites web populaires. (essayez d'ajouter commentaire de test à cette question, puis accédez à la page différente et frapper la touche retour pour revenir -, votre commentaire sera "disparu")

Cela semble logique, pourtant certains sites (apple.com, basecamphq.com etc) sont en quelque sorte forcer le navigateur à l'utilisateur de service de l'état le plus récent de la page. (passez à http://www.apple.com/ca/search/?q=ipodcliquez sur dire "Téléchargements" en haut, puis cliquez sur le bouton retour - tous les DOM mises à jour seront conservés)

où est l'incohérence en venir?

Answer 1

Une seule réponse: Entre autres choses, de 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 ré-afficher la page très rapidement lors de la navigation via les boutons précédent et suivant, et préserve l'état de la DOM et toutes les variables JavaScript. Toutefois, lorsqu'une page contient les événements onunload, ces événements pourraient potentiellement mettre la page dans un non-fonctionnelle de l'état, et donc la page n'est pas stocké dans le bfcache et doit être rechargé (mais peut être chargé à partir de la norme de cache) et re-rendus à partir de zéro, y compris l'exécution de tous les onload gestionnaires. Lorsque vous revenez à une page via le bfcache, le DOM est conservé dans son état antérieur, sans avoir à feu onload gestionnaires (parce que la page est déjà chargé).

Notez que le comportement de la bfcache est différent de la norme cache du navigateur en ce qui concerne le Contrôle du Cache, et d'autres en-têtes HTTP. Dans de nombreux cas, les navigateurs en cache d'une page dans le bfcache même si il n'aurait pas autrement de le stocker dans le standard de cache.

jQuery associe automatiquement un événement de déchargement à la fenêtre, donc, malheureusement, à l'aide de jQuery entraînera la disqualification de votre page d'être stocké dans le bfcache pour les DOM préservation et rapide en arrière/avant. [Mise à jour: ce problème a été corrigé dans jQuery 1.4 de sorte qu'il s'applique uniquement pour IE]

• Informations sur le Firefox bfcache
• Informations sur le Safari Cache de la Page et des éventuelles modifications futures comment décharger des événements de travail
• Opera utilise rapide de l'histoire de la navigation
• Chrome ne dispose pas d'une mémoire cache de page ([1], [2])
• Pages pour jouer avec les manipulations DOM et la bfcache:
  • Cette page sera stocké dans le cache normal
  • Cette page ne sera pas, mais sera toujours bfcached

Answer 2

J'ai essayé d'obtenir de Chrome à se comporter comme Safari, et le seul moyen que j'ai trouvé qui fonctionne est de fixer Cache-control: no-store dans les en-têtes. Cela force le navigateur à re-chercher la page sur le serveur lorsque l'utilisateur appuie sur le bouton retour. Pas l'idéal, mais mieux que d'être montré un out-of-date page.

Answer 3

Facebook se souvient de l'état de la page en modifiant la valeur de hachage identifiant dans l'URL pour les requêtes ajax. Ces modifications sont enregistrées dans l'historique du navigateur, de sorte que lorsque l'utilisateur clique sur le bouton de retour, le hachage des modifications à ce qu'il était avant. Alors, il est implicite que vous aurez besoin d'un peu de Javascript pour surveiller l'a identifiant et de réagir lorsqu'elle est modifiée par le navigateur. Andreas Blixt a un hachage script de surveillance disponibles.

Answer 4

Cela n'a rien à voir avec le dièse (#) au symbole.

Si vous voulez vérifier apple les en-têtes HTTP, c'est tout simplement la mise en cache de la page.

Answer 5

À l'aide de l'URL de hachage/identificateur de fragment est une jolie façon la plus commune de crochet/souvenez-vous de l'état dans une application web qui s'appuie sur l'Ajax et DOM mises à jour.

Découvrez la Vraiment Simple Histoire de projet pour quelques idées. Il est possible de surveiller l'URL pour que les modifications de la table de hachage, et rsh n', tout en prenant en compte les différences de navigateurs.