web-dev-qa-db-fra.com

Détecter si la page est chargée à partir du bouton précédent

Existe-t-il un moyen de détecter si la page actuelle provient du bouton Précédent?

Je souhaite charger les données du cookie uniquement si la page actuelle provient du bouton Précédent. 

javascriptinternet-explorerfirefox
11
Valter

Lorsqu'un utilisateur revient en arrière dans une page, toutes les données de formulaire visibles sont conservées, tandis que les variables JavaScript sont réinitialisées. Je parle de données de formulaire «visibles», car les champs cachés ne semblent pas être préservés, mais les entrées invisibles le sont.

Vous pouvez utiliser ceci à votre avantage pour déterminer si la page était un chargement initial ou avait déjà été chargée précédemment, par exemple à partir d'un clic sur le bouton Précédent.

Créez un champ de saisie invisible (pas de type 'caché') avec la valeur '0', et dans un chargeur DOM prêt, vérifiez si la valeur a été définie sur '1'; si vous savez que la page a déjà été chargée, par exemple à partir d'un bouton Précédent; s'il est toujours '0' alors que la page a été chargée pour la première fois, définissez la valeur sur '1'.

Note: Ceci est un peu délicat dans la façon dont cela fonctionne, et ne fonctionne probablement pas dans tous les navigateurs; Je l'ai construit en pensant à Chrome.

  • Le DOM doit être chargé. toutes les fonctions prêtes ne fonctionnent pas. Celui Ci-dessous, le JQuery est prêt; cependant (function () {}) dans mon cas ne le fait pas. 
  • L'entrée ne peut pas être de type = "caché". Définissez style = "display: none;" Sur l'entrée à la place.

.

<input id="backbuttonstate" type="text" value="0" style="display:none;" />
<script>
document.addEventListener('DOMContentLoaded', function () {
   var ibackbutton = document.getElementById("backbuttonstate");
   if (ibackbutton.value == "0") {
     // Page has been loaded for the first time - Set marker
     ibackbutton.value = "1";
     alert('First time load');
   } else {
     // Back button has been fired.. Do Something different..
     alert('Previously loaded - Returned from Back button');
   }
}, false);
</script>
11
Radderz
 if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
        $('.formName').get(0).reset();
    }
4
user3793702

Je pense que cela pourrait être fait avec sessionStorage si vous travaillez avec des pages de votre projet (cela ne prend pas en compte les pages externes). De mémoire, lorsque vous êtes sur votre "page principale", vous cliquez sur un lien et passez à la page suivante.

Sur cette page suivante, vous pouvez définir une valeur dans sessionStorage comme suit:

sessionStorage.setItem('doSomething', 'yes');

Ensuite, retournez à votre page principale, vous pouvez avoir une condition comme:

const sCheckSession = sessionStorage.getItem('doSomething');
if(sCheckSession == 'yes') {
  // do something crazy, then reset your reference to no
  // so it wont interfere with anything else
  sessionStorage.setItem('doSomething', 'no');
}
1
UXCODA

Fondamentalement, vous ne pouvez pas en raison des restrictions du navigateur. API d'histoire HTML5, l'événement onpopstate sera déclenché lors de la navigation vers la page précédente. Mais cela se déclenche même si vous utilisez la navigation dans les applications.

solution alternative référez-vous - Comment détecter un événement du bouton Précédent du navigateur - Navigateur croisé

1
Anand Itagi

Pour une vérification plus simple, il y a Spécification de l'API Navigation Timing (déjà obsolète, mais largement prise en charge) et Spécification de l'API Navigation Timing Niveau 2 (brouillon de travail, pris en charge par le navigateur principal)

if (window.performance) {
     var navEntries = window.performance.getEntriesByType('navigation');
     if (navEntries.length > 0 && navEntries[0].type === 'back_forward') {
          console.log('As per API lv2, this page is load from back/forward');
     } else if (window.performance.navigation
          && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
          console.log('As per API lv1, this page is load from back/forward');
     } else {
          console.log('This is normal page load');
     }
} else {
     console.log("Unfortunately, your browser doesn't support this API");
}
1
Montri M