Comment forcer le rechargement d'une page lorsque vous utilisez le bouton Back du navigateur?

vous pouvez utiliser pageshow événement pour gérer la situation lorsque le navigateur navigue à votre page à travers l'histoire traversée:

window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted || 
                         ( typeof window.performance != "undefined" && 
                              window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
    // Handle page restore.
    window.location.reload();
  }
});

notez que le cache HTTP peut aussi être impliqué. Vous devez définir les en-têtes HTTP relatifs au cache sur le serveur pour ne mettre en cache que les ressources qui doivent être mises en cache. Vous pouvez également effectuer un rechargement forcé sur instact browser pour ignorer le cache HTTP: window.location.reload( true ) . Mais je ne pense pas que ce soit la meilleure solution.

pour plus contrôle d'information:

• travailler avec BFCache article sur MDN
• WebKit Cache de la Page II – L'Événement unload par Brady Eidson
• pageshow événement de référence sur MDN
• Ajax, bouton de retour et DOM mises à jour question
• JavaScript-Bfcache/pageshow événement - événement.persisted toujours mis à false? question

Cela fait un moment que cela a été publié, mais j'ai trouvé une solution plus élégante si vous n'avez pas besoin de prendre en charge les vieux navigateurs.

vous pouvez faire un contrôle avec

performance.navigation.type

la Documentation incluant le support du navigateur est ici: https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

donc pour voir si la page a été chargée d'histoire en utilisant back vous pouvez faire

if(performance.navigation.type == 2){
   location.reload(true);
}

le 2 indique que la page a été consultée en naviguant dans l'historique. D'autres possibilités sont-

0: on a accédé à la page en suivant un lien, un signet, un formulaire ou un script, ou en tapant l'URL dans la barre d'adresse.

1: pour accéder à la page, cliquez sur le bouton "Recharger" ou cliquez sur l'emplacement.reload() la méthode.

255: toute autre voie

ceux-ci sont détaillés ici: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

il suffit d'utiliser jquery :

jQuery( document ).ready(function( $ ) {

   //Use this inside your document ready jQuery 
   $(window).on('popstate', function() {
      location.reload(true);
   });

});

ce qui précède fonctionne à 100% lorsque le bouton "back" ou "forward" a été cliqué en utilisant ajax.

si ce n'est pas le cas, il doit y avoir une mauvaise configuration dans une autre partie du script.

par exemple, il pourrait ne pas recharger si quelque chose comme l'un des exemples dans le post précédent est utilisé window.history.pushState('', null, './');

donc quand vous utilisez history.pushState(); assurez-vous que vous l'utilisez correctement.

Suggestion dans la plupart des cas, vous aurez juste besoin:

history.pushState(url, '', url); 

pas de fenêtre.histoire... et assurez-vous que url est défini.

Espère que ça aide..

vous devez utiliser une entrée cachée comme indicateur de rafraîchissement, avec une valeur de "non":

<input type="hidden" id="refresh" value="no">

maintenant en utilisant jQuery, vous pouvez vérifier sa valeur:

$(document).ready(function(e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});

lorsque vous cliquez sur le bouton précédent, les valeurs dans les champs cachés conservent la même valeur que lorsque vous avez quitté la page.

ainsi la première fois que vous chargez la page, la valeur de l'entrée serait"non". Lorsque vous revenez à la page, il sera "oui" et votre Le code JavaScript déclenche une mise à jour.

j'ai trouvé la meilleure réponse et il fonctionne parfaitement pour moi

il suffit d'utiliser ce script simple dans votre lien

<A HREF="javascript:history.go(0)">next page</A>

ou le bouton Click event

<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">

lorsque vous utilisez ceci, Vous rafraîchissez d'abord votre page puis allez à la page suivante, quand vous reviendrez, ce sera le dernier état rafraîchi.

Je l'ai utilisé dans un login CAS et me donne ce que je veux. Espérons que cela aide .......

détails trouvés à partir de ici

recharger est facile. Vous devez utiliser:

location.reload(true);

Et la détection de retour est :

window.history.pushState('', null, './');
  $(window).on('popstate', function() {
   location.reload(true);
});

la meilleure façon est de mettre le temps d'arrêt en utilisant jquery.

function explode(){
  alert("YOUR RELOAD PAGE HERE!");
}
setTimeout(explode, 1);

dans une milliseconde il déclenchera la fonction une fois, de sorte que vos utilisateurs pourraient même ne pas remarquer le déclenchement.

je l'utilise sans problème.