Vérifier si la page est rechargée ou rafraîchie en JavaScript

Question

Je veux vérifier quand quelqu'un essaie de rafraîchir une page.

Par exemple, lorsque j'ouvre une page, rien ne se passe, mais lorsque je rafraîchis la page, une alerte doit s'afficher.

Answer 1

window.performance.navigation.type est obsolète, voir Réponse de la Commission

---

Une meilleure façon de savoir si la page est effectivement rechargée est d'utiliser l'objet navigateur qui est pris en charge par la plupart des navigateurs modernes.

Il utilise le API de chronométrage de la navigation .

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
  console.info( "This page is reloaded" );
} else {
  console.info( "This page is not reloaded");
}

source : https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

Answer 2

Nouvelle norme 2018-maintenant (PerformanceNavigationTiming)

window.performance.navigation la propriété est déprécié dans le Navigation Timing Niveau 2 spécification. Veuillez utiliser le PerformanceNavigationTiming à la place.

PerformanceNavigationTiming.type

Il s'agit d'un technologie expérimentale .

Vérifiez le Tableau de compatibilité des navigateurs soigneusement avant de l'utiliser en production.

Vérifier si la page est rechargée ou rafraîchie en JavaScript

const pageAccessedByReload = (
  (window.performance.navigation && window.performance.navigation.type === 1) ||
    window.performance
      .getEntriesByType('navigation')
      .map((nav) => nav.type)
      .includes('reload')
);

alert(pageAccessedByReload);

Support le 2019-07-08

La propriété type, en lecture seule, renvoie une chaîne de caractères représentant le type de navigation. La valeur doit être l'une des suivantes :

• naviguer sur - La navigation a commencé en cliquant sur un lien, en saisissant l'URL dans la barre d'adresse du navigateur, en soumettant un formulaire ou en s'initialisant par le biais d'une opération script autre que reload et back_forward comme indiqué ci-dessous.

• recharger - La navigation se fait par le biais de l'opération de rechargement du navigateur ou location.reload() .

• retour_en avant - La navigation se fait par le biais de l'opération de traversée de l'historique du navigateur.

• prérendu - La navigation est initiée par un indice de prérenduction .

Cette propriété est en lecture seule.

L'exemple suivant illustre l'utilisation de cette propriété.

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);

    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));

    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}

Answer 3

La première étape consiste à vérifier sessionStorage pour une certaine valeur prédéfinie et s'il existe, alerter l'utilisateur :

if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');

La deuxième étape consiste à définir sessionStorage à une certaine valeur (par exemple true ) :

sessionStorage.setItem("is_reloaded", true);

Les valeurs de la session sont conservées jusqu'à la fermeture de la page, de sorte qu'elles ne fonctionnent que si la page est rechargée dans un nouvel onglet du site. Vous pouvez également conserver le nombre de recharges de la même manière.

Answer 4

Enregistrez un cookie la première fois que quelqu'un visite la page. Lors de l'actualisation, vérifiez si votre cookie existe et si c'est le cas, alertez-le.

function checkFirstVisit() {
  if(document.cookie.indexOf('mycookie')==-1) {
    // cookie doesn't exist, create it now
    document.cookie = 'mycookie=1';
  }
  else {
    // not first visit, so alert
    alert('You refreshed!');
  }
}

et dans votre balise body :

<body onload="checkFirstVisit()">

Answer 5

J'ai écrit cette fonction pour vérifier les deux méthodes en utilisant l'ancien système. window.performance.navigation et de nouvelles performance.getEntriesByType("navigation") en même temps :

function navigationType(){

    var result;
    var p;

    if (window.performance.navigation) {
        result=window.performance.navigation;
        if (result==255){result=4} // 4 is my invention!
    }

    if (window.performance.getEntriesByType("navigation")){
       p=window.performance.getEntriesByType("navigation")[0].type;

       if (p=='navigate'){result=0}
       if (p=='reload'){result=1}
       if (p=='back_forward'){result=2}
       if (p=='prerender'){result=3} //3 is my invention!
    }
    return result;
}

Description du résultat :

0 : cliquer sur un lien, saisir l'URL dans la barre d'adresse du navigateur, soumettre un formulaire, cliquer sur un signet, initialiser par une opération script.

1 : En cliquant sur le bouton Recharger ou en utilisant Location.reload()

2 : Travailler avec l'historique des navigateurs (Bakc et Forward).

3 : activité de prérendu comme <link rel="prerender" href="http://stackoverflow.com//example.com/next-page.html">

4 : toute autre méthode.