JavaScript - bfcache/pageshow événement - événement.persistait toujours la valeur false?

Dans un standard de Java /spring mvc /JSP /jQuery web-app, je vais essayer de détecter un "Retour" (ou de l'histoire.go(-1)) de l'événement, afin de rafraîchir (AJAX) un résumé de la composante/panneau de contenu quand je retourner à une page (où l'on peut modifier les données back-end qui est affiché par le résumé de la composante).

J'ai essayé les en JavaScript (à la suite de certains postes sur StackExchange re comment y parvenir):

<script type="text/javascript">
$(document).ready(function() {
    window.onpageshow = function(event) {
        console.log("Event:");
        console.dir(event);
        if (event.persisted) {
            alert("non-jQuery - back to page - loaded from bfcache");
        } else {
            alert("non-jQuery - loaded page from server");
        }
    };
    $(window).on("pageshow", function(event){
        console.log("Event:");
        console.dir(event);
        if (event.originalEvent.persisted) {
            alert("jquery - back to page - loaded from bfcache");
        } else {
            alert("jquery - loaded page from server");
        }
    });
});
</script>

Je suis sous OpenSUSE Linux et ont essayé avec FireFox et Chrome (dernière version), mais à chaque fois l'événement persisted de définir l'attribut false (je peux le voir dans la console JavaScript et par les alertes pop-up à partir du code ci-dessus). Par tous les temps, je veux dire, peu importe si il a été chargé à partir du serveur ou montré de nouveau via le bouton Retour (ou un lien "Retour").

Mon intention était de faire un appel AJAX pour recharger le résumé de la composante/panneau avec la mise à jour des données à partir du serveur si la page a été montrant via le bouton Retour ou history.go(-1) appel.

J'ai aussi essayé la fixation d'un déchargement gestionnaire (qui ne fait rien) pour prévenir la page à partir de la mettre dans le bfcache mais il semble toujours être montrant un bf-version mise en cache et la event.persisted (ou event.originalEvent.persisted) est mis à false.

Est-ce bien gérés correctement sur Linux? Suis-je en train de faire quelque chose de stupide dans mon code? Toute aide ou des idées serait très apprécié, merci!

  • Je ne pense pas que cela n'a rien à voir avec Linux. Je suis en cours d'exécution sur un Mac exécutant OS 10.9 Mavericks avec deux safaris 7 et Firefox 26. J'ai essayé toutes les techniques que je peux trouver, y compris le serveur envoyez-tête cache-control (Cache-Control: no-cache, must-revalidate, max-age=0). Les navigateurs jamais fait de recharger la page (vérifié via Wireshark), et de l'événement.persisté est toujours faux.
InformationsquelleAutor Eoin | 2013-07-02
  1. 9

    Ce qui semble être un bug dans Chrome (également présent dans IE11).

    J'ai trouvé la solution de contournement suivante:

    <input type="hidden" id="cacheTest"></input>
<script>
  var input = document.querySelector('#cacheTest')

  if (input.value === "") {
    //the page has been loaded from the server,
    //equivalent of persisted == false
  }
  else {
    //the page has been loaded from the cache,
    //equivalent of persisted == true
  }

  //change the input value so that we can detect
  //if the page is reloaded from cache later
  input.value = "some value"
</script>

    Ce exploite le fait que dans la plupart des navigateurs, lorsque la page est chargée dans le cache, les champs de formulaire valeurs sont également conservées.

    • Bien que cela fonctionne pour Chrome 39.0.2171.95 (64-bit), il ne semble pas faire la même chose dans iOS, Chrome ou Safari 8. Tous les conseils? merci
    • ouais en fait j'ai corrigé ceux avec l'histoire.popstate solution, merci
    • cela ne fonctionne PAS comme de Chrome 39. Il également ne fonctionne toujours pas comme de Chrome 70.
    InformationsquelleAutor gregclermont
  2. 9

    J'ai trouvé caché boutons d'entrée ne sont pas une solution fiable, étant donné qu'ils peuvent tenir la bonne valeur lorsque l'utilisateur navigue vers la page, et frappe, puis sur actualiser. Certains navigateurs (Firefox) de conserver les valeurs d'entrée à l'actualisation de sorte que chaque fois que l'utilisateur appuie sur l'actualiser actualise de nouveau depuis le bouton input est titulaire d'une fausse valeur. C'est un scénario typique pour les forums (de l'utilisateur vue sur un sujet, clique sur le bouton précédent pour revenir à la liste des rubriques, et peut continuer à cliquer sur "actualiser" pour vérifier si il y a de nouveaux sujets).

    Comme mentionné par Grégoire de Clermont, event.persisted est buggé dans chrome (et IE) et cela n'a toujours pas été fixée, soit navigateur Février 2017. La bonne nouvelle est que vous pouvez compter sur window.performance.navigation.type == 2 pour chrome et IE. Ironiquement, Firefox n'est pas fiable pour le second, mais il ne devrait pas car il est fiable pour event.persisted. Le code suivant a fonctionné pour moi:

    if (document.addEventListener) {
    window.addEventListener('pageshow', function (event) {
        if (event.persisted || window.performance && 
            window.performance.navigation.type == 2) 
        {
            location.reload();
        }
    },
   false);
}
    • Firefox correctement l'appui de la fenêtre.les performances.la navigation.type = 2, comme de FF v70.
    InformationsquelleAutor Tom Davenport
  3. 0

    Je sais c'est un peu tard, mais cela fonctionne pour moi:

    window.onpageshow = function(e) {

    if (e.persisted) {

        alert("Page shown");
        window.location.reload();
    }
};

    Je ne pense pas que vous en avez besoin dans le document de prêt de la fonction, il suffit d'utiliser de la vanille comme ci-dessus.

    • Pourquoi est-ce downvoted? Cette approche est la bonne, testé sur safari.
    • Je ne pense pas que cela fonctionne sur Chrome pour info.
    InformationsquelleAutor Chez