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

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

par exemple, quand j'ouvre une page, rien ne se passe mais quand je rafraîchis la page renvoie une alerte.

113
demandé sur CarComp 2011-02-15 17:39:02

7 réponses

une meilleure façon de savoir que la page est effectivement Rechargée est d'utiliser l'objet navigator qui est pris en charge par la plupart des navigateurs modernes.

il utilise le API de synchronisation de Navigation .

//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

150
répondu Rahul Jain 2018-04-11 12:02:39

la première étape consiste à vérifier sessionStorage pour une valeur prédéfinie et si elle existe, alerter l'utilisateur:

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

la deuxième étape consiste à fixer sessionStorage à une certaine valeur (par exemple true ):

sessionStorage.setItem("is_reloaded", true);

les valeurs de Session sont conservées jusqu'à ce que la page soit fermée de sorte qu'elle ne fonctionnera que si la page est rechargée dans un nouvel onglet avec le site. Vous pouvez également garder le compte de rechargement de la même façon.

37
répondu DitherSky 2016-06-01 22:40:23

conservez un cookie la première fois que quelqu'un visite la page. Lors du rafraîchissement, vérifiez si votre cookie existe et si c'est le cas, signalez-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 étiquette corporelle:

<body onload="checkFirstVisit()">
15
répondu techfoobar 2011-12-20 07:25:23

j'ai trouvé quelques informations ici Javascript Détection Actualisation de la Page . Sa première recommandation est d'utiliser des champs cachés, qui ont tendance à être stockés à travers des mises à jour de page.

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>
6
répondu VoronoiPotato 2017-12-15 12:19:18

si

event.currentTarget.performance.navigation.type

retourne

0 => l'utilisateur vient de taper une Url

1 = > page reloaded

2 = > bouton arrière cliqué.

5
répondu sony vizio 2017-03-18 20:02:23

j'ai trouvé quelques informations ici JavaScript Detecting page Refresh

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

window.onbeforeunload = UnLoadWindow;
1
répondu Manpreet 2017-02-01 08:51:44

si vous voulez également détecter si l'utilisateur clique sur le X en haut à droite du navigateur:

function handleWindowClose()
{

  if((window.event.clientX<0) || (window.event.clientY<0))

    {

      event.returnValue = "If you have made any changes to the fields without clicking the Save button, your changes will be lost.";
    }
}
0
répondu Manpreet 2017-02-01 09:38:06