Comment forcer le rechargement d'une page lorsque l'on utilise le bouton retour du navigateur ?

Question

J'ai besoin de détecter d'une manière ou d'une autre que l'utilisateur a appuyé sur le bouton retour du navigateur et de recharger la page avec un rafraîchissement (rechargement du contenu et du CSS) en utilisant jquery.

Comment détecter une telle action via jquery ?

En effet, à l'heure actuelle, certains éléments ne sont pas rechargés si j'utilise le bouton retour du navigateur. Mais si j'utilise des liens dans le site Web, tout est rafraîchi et s'affiche correctement.

IMPORTANT !

Certaines personnes ont probablement mal compris ce que je veux. Je ne veux pas rafraîchir la page en cours. Je veux rafraîchir la page qui est chargée après avoir appuyé sur le bouton retour. Voici ce que je veux dire de manière plus détaillée :

1. L'utilisateur visite la page1.
2. alors qu'il se trouve sur la page 1, il clique sur un lien vers la page 2.
3. il est redirigé vers la page2
4. maintenant (partie importante !) il clique sur le bouton "retour" dans le navigateur parce qu'il veut revenir à la page 1.
5. il est de retour sur la page 1 - et maintenant la page 1 est rechargée et quelque chose est alerté comme "Vous êtes de retour !".

Answer 1

Vous pouvez utiliser pageshow pour gérer la situation lorsque le navigateur navigue vers votre page par le biais de l'historique :

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 également être impliqué. Vous devez définir correctement les en-têtes HTTP liés au cache sur le serveur pour mettre en cache uniquement les ressources qui doivent l'être. Vous pouvez également effectuer un rechargement forcé pour que le navigateur ignore le cache HTTP : window.location.reload( true ) . Mais je ne pense pas que ce soit la meilleure solution.

Pour plus d'informations, consultez le site :

• Travailler avec BFCache article sur MDN
• Cache de page WebKit II - L'événement de déchargement par Brady Eidson
• pageshow référence de l'événement sur MDN
• Ajax, bouton retour et mises à jour du DOM question
• JavaScript - événement bfcache/pageshow - event.persisted toujours réglé sur false ? question

Answer 2

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

Vous pouvez faire une vérification avec

performance.navigation.type

La documentation, y compris la prise en charge des navigateurs, se trouve ici : https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

Donc pour voir si la page a été chargée depuis l'historique en utilisant le retour, vous pouvez faire

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

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

0: La page a été consultée en suivant un lien, un signet, une soumission de formulaire ou un script, ou en tapant l'URL dans la barre d'adresse.

1: L'accès à la page s'est fait en cliquant sur le bouton Reload ou via la méthode Location.reload().

255: Tout autre moyen

Elles sont détaillées ici : https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

---

Note Performance.navigation.type est maintenant déprécié en faveur de PerformanceNavigationTiming.type qui renvoie 'naviguer' / 'recharger' / 'retour_avant' / 'prérendu' : https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type

Answer 3

Utilisez simplement jquery :

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

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

});

Ce qui précède fonctionnera à 100% lorsque le bouton de retour ou d'avance a été cliqué en utilisant l'ajax également.

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 se recharger si quelque chose comme l'un des exemples de l'article précédent est utilisé. window.history.pushState('', null, './');

donc lorsque vous utilisez history.pushState(); assurez-vous de l'utiliser correctement.

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

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

Pas de window.history... et assurez-vous que url est défini.

J'espère que cela vous aidera

Answer 4

Vous devez utiliser une entrée cachée comme indicateur de rafraîchissement, avec la valeur "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 retour, les valeurs des 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 est "non". Lorsque vous revenez sur la page, elle sera "oui" et votre code JavaScript déclenchera une actualisation.

Answer 5

Le rechargement est facile. Vous devriez utiliser :

location.reload(true);

Et la détection de retour est :

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