web-dev-qa-db-fra.com

Vérifier si la page est rechargée ou actualisée en JavaScript

Je veux vérifier quand quelqu'un essaie d'actualiser une page.

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

javascriptpage-refresh
148
Ahmed

Un meilleur moyen de savoir que la page est réellement rechargée consiste à utiliser l'objet de navigateur pris en charge par la plupart des navigateurs modernes.

Il utilise le Navigation Timing API .

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
  if (performance.navigation.type == 1) {
    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

193
Rahul Jain

La première étape consiste à vérifier sessionStorage pour une valeur prédéfinie et s’il existe un utilisateur averti:

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

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

sessionStorage.setItem("is_reloaded", true);

Les valeurs de session conservées jusqu'à la fermeture de la page ne fonctionneront donc que si la page est rechargée dans un nouvel onglet avec le site. Vous pouvez également garder le nombre de recharges de la même manière.

39
DitherSky

Nouvelle norme 2018, 2019 (PerformanceNavigationTiming)

La propriété window.performance.navigation est obsolète dans la spécification Navigation Timing Level 2 . Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

PerformanceNavigationTiming.type

Ceci est un technologie expérimentale .

Vérifiez soigneusement le Tableau de compatibilité du navigateur avant de l’utiliser en production.

Support sur 2019-07-08

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

  • naviguer - La navigation a été lancée en cliquant sur un lien, en entrant l'URL dans la barre d'adresse du navigateur, en envoyant un formulaire ou en l'initialisant via une opération de script autre que reload et back_forward. comme indiqué ci-dessous.

  • reload - La navigation s'effectue via l'opération de rechargement du navigateur ou location.reload() .

  • back_forward - La navigation permet de naviguer dans l'historique du navigateur.

  • prérender - La navigation est lancée par un indice de prérender .

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);
  }
}
19
Илья Зеленько

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

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()">
15
techfoobar

J'ai trouvé quelques informations ici Javascript Detecting Page Refresh . Sa première recommandation consiste à utiliser des champs cachés, qui ont tendance à être stockés lors de l'actualisation des pages.

function checkRefresh() {
    if (document.refreshForm.visited.value == "") {
        // This is a fresh page load
        document.refreshForm.visited.value = "1";
        // You may want to add code here special for
        // fresh page loads
    } else {
        // This is a page refresh
        // Insert code here representing what to do on
        // a refresh
    }
}
<html>

<body onLoad="JavaScript:checkRefresh();">
    <form name="refreshForm">
        <input type="hidden" name="visited" value="" />
    </form>

</body>

</html>
7
VoronoiPotato

si

event.currentTarget.performance.navigation.type

résultats

0 => l'utilisateur vient de taper une URL
1 => page rechargée
2 => bouton de retour cliqué.

6
nPcomp

J'ai écrit cette fonction pour vérifier les deux méthodes en utilisant l'ancien window.performance.navigation et le nouveau 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:

: en cliquant sur un lien, Saisie de l'URL dans la barre d'adresse du navigateur, soumission du formulaire, en cliquant sur le signet, initialisation par une opération de script.

1: Cliquez sur le bouton Recharger ou utilisez Location.reload()

2: Utilisation de l’historique de navigateurs (Bakc et Forward).

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

4: toute autre méthode.

2
Ali Sheikhpour

J'ai trouvé des informations ici. Javascript Detecting Page Refresh

function UnLoadWindow() {
    return 'We strongly recommends NOT closing this window yet.'
}

window.onbeforeunload = UnLoadWindow;
2
Manpreet