web-dev-qa-db-fra.com

Comment forcer le rechargement d'une page lorsque vous utilisez le bouton Précédent du navigateur?

Je dois en quelque sorte détecter que l'utilisateur a appuyé sur le bouton retour du navigateur et recharger la page avec une actualisation (rechargement du contenu et des CSS) à l'aide de jquery.

Comment détecter une telle action via jquery?

Parce qu'actuellement, certains éléments ne sont pas rechargés si j'utilise le bouton Précédent dans un navigateur. Mais si j'utilise des liens sur le site Web, tout est actualisé et affiché correctement.

IMPORTANT!

Certaines personnes ont probablement mal compris ce que je veux. Je ne veux pas actualiser la page actuelle. Je souhaite actualiser la page chargée après avoir appuyé sur le bouton Précédent. voici ce que je veux dire de manière plus détaillée:

  1. l'utilisateur visite la page1.
  2. tandis que sur la page1 - il clique sur un lien vers la page2.
  3. il est redirigé vers la page2
  4. maintenant (partie importante!) il clique sur le bouton de retour dans le navigateur parce qu'il veut revenir à la page1
  5. il est de retour sur la page1 - et maintenant la page1 est en cours de rechargement et quelque chose est alerté comme "Vous êtes de retour!"
javascriptjquerybrowserbrowser-cachepage-refresh
33
John Doeherskij

Vous pouvez utiliser l'événement pageshow pour gérer la situation lorsque le navigateur accède à 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 les en-têtes HTTP appropriés liés au cache sur le serveur pour mettre en cache uniquement les ressources devant être mises en cache. Vous pouvez également effectuer un rechargement forcé pour inciter le navigateur à ignorer le cache HTTP: window.location.reload( true ). Mais je ne pense pas que ce soit la meilleure solution.

Pour plus d'informations, consultez:

39
Leonid Vasilev

Cela fait un moment que cela a été posté, mais j'ai trouvé une solution plus élégante si vous n'avez pas besoin de supporter les anciens navigateurs.

Vous pouvez faire un chèque avec 

performance.navigation.type

La documentation, y compris le support du navigateur, est disponible ici: https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

Donc, pour voir si la page a été chargée à partir de l'historique en utilisant le dos, vous pouvez le faire

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

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

0:La page a été accédé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:La page a été accédée en cliquant sur le bouton Recharger ou via la méthode Location.reload ().

255: Toute autre manière

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

23
James

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 vous cliquez sur le bouton Précédent ou Suivant en utilisant également 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 celui de l'exemple de l'article précédent est utilisé window.history.pushState('', null, './');

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

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

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

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

J'espère que cela pourra aider..

10
Francesco

Vous devez utiliser une entrée masquée comme indicateur d'actualisation, 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 Précédent, les valeurs des champs masqué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 sera «non». Lorsque vous revenez à la page, ce sera "oui" et votre code JavaScript déclenchera une actualisation.

5
Dhiraj

J'ai trouvé la meilleure réponse et cela fonctionne parfaitement pour moi

il suffit d'utiliser ce script simple dans votre lien 

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

ou l'événement de clic de bouton

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

lorsque vous l'utilisez, vous actualisez d'abord votre page, puis passez à la page suivante.

Je l'ai utilisé dans un identifiant CAS et me donne ce que je veux ... je l'espère.

détails trouvés de ici

0
muhammed aslam

Recharger est facile. Tu devrais utiliser:

location.reload(true);

Et détecter en retour c'est: 

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