186

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, elle doit afficher une alerte.

javascript page-refresh Ahmed
la source

1

Pas vraiment possible sans code côté serveur. Pourquoi en avez-vous besoin? Peut-être que si vous donnez une vue d'ensemble, nous pouvons suggérer une meilleure alternative.

Shadow Wizard est une oreille pour vous

Peut-être que vous pourriez faire une chose avec un cookie ... comme stocker l'heure et, lors du rechargement, comparer le décalage horaire.

Felix Kling

Je veux faire comme le lien facebook sera #! / Tout ce que je veux supprimer #! lorsque la page est rechargée uniquement

Ahmed

1

@Ahmed j'essaye de faire la même chose. L'une des solutions ci-dessous a-t-elle fonctionné pour vous?

Paul Fitzgerald

3

⚠️⚠️⚠️ window.performance.navigation.typeest obsolète, veuillez voir ma réponse .

Илья Зеленько

221

⚠️⚠️⚠️ window.performance.navigation.typeest obsolète, veuillez voir la réponse de Илья Зеленько

Une meilleure façon de savoir que la page est réellement rechargée consiste à utiliser l'objet navigateur pris en charge par la plupart des navigateurs modernes.

Il utilise l' API de synchronisation de 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");
}

Développer l'extrait

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

Rahul Jain
la source

1

merci mon pote, c'est une solution précise pour détecter soit que la page est rechargée à partir du clic droit / rafraîchir à partir du navigateur, soit rechargée par l'url.

Roque Mejos

4

Attention, Chrome a récemment modifié ce comportement. Lorsque l'utilisateur clique sur la barre d'adresse actuelle et appuie sur Entrée, la valeur de performance.navigation.type sera 1 qui devrait être 0. J'ai testé dans la version 56. Je ne sais pas pourquoi.

Jackwin tung le

1

Leur façon de fonctionner est comme prévu, toute interaction avec la page qui force un nouvel état de navigation vers la même page est considérée comme une actualisation. Donc, en fonction de votre code, c'est extrêmement utile, que ce soit pour vous inscrire à chaque fois que la page a été actualisée, rechargée ou pour toute interaction ajax. Je peux donner à cela de nombreuses utilisations pour les fonctionnalités et les analyses.

raphie

27

performance.navigation.type == performance.navigation.TYPE_RELOADest plus facile à lire au lieu de == 1. De plus, si vous vérifiez, performance.navigationvous constaterez qu'il existe 4 types de navigation différents comme TYPE_BACK_FORWARD,TYPE_NAVIGATE

Vitalij Kornijenko

5

⚠️⚠️⚠️ window.performance.navigation.typeest obsolète, veuillez voir ma réponse .

Илья Зеленько

37

La première étape consiste à vérifier sessionStorageune valeur prédéfinie et si elle existe, alerte l'utilisateur:

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

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

sessionStorage.setItem("is_reloaded", true);

Les valeurs de session sont conservées jusqu'à ce que la page soit fermée, donc cela ne fonctionnera que si la page est rechargée dans un nouvel onglet avec le site. Vous pouvez également conserver le nombre de recharges de la même manière.

DitherSky
la source

28

Deux choses à savoir: 1). Vous ne pouvez stocker des valeurs de chaîne que dans la session et le stockage local. Par conséquent trueest converti en "true". 2). Le stockage de session persiste jusqu'à ce que l'utilisateur ferme la fenêtre du navigateur, vous ne pouvez donc pas faire la différence entre le rechargement de la page et la navigation depuis et vers votre site dans la même session de navigateur.

Hector

35

Nouvelle norme 2018-maintenant (PerformanceNavigationTiming)

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

PerformanceNavigationTiming.type

C'est une technologie expérimentale .

Vérifiez le tableau de compatibilité du navigateur attentivement le avant de l'utiliser en production.

Support le 08/07/2019

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 commencé en cliquant sur un lien, en saisissant l'URL dans la barre d'adresse du navigateur, en soumettant un formulaire ou en l'initialisant via une opération de script autre que recharger et back_forward comme indiqué ci-dessous.
recharger - La navigation se fait via l'opération de rechargement du navigateur ou location.reload().
back_forward - La navigation s'effectue via l'opération de traversée de l'historique du navigateur.
prerender - La navigation est initiée par un indice de prerender .

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);
  }
}

Илья Зеленько
la source

4

+1 pour avoir signalé l'API obsolète, mais -100 à Apple pour son manque de support dans iOS encore en 2020

kinakuta

14

Stockez 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.

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

techfoobar
la source

9

Qu'en est-il des utilisateurs qui reviennent?

Red Taz

5

Comme @ Rob2211 dit, cela ne vérifie que si la page a été visitée et peut donner un faux positif tant que la page est revisitée lorsque le cookie est toujours actif. Ne l'utilisez pas pour vérifier l'actualisation.

Brannon

@Brannon - Le cookie est créé sans aucune valeur d'expiration et sera détruit lorsque le navigateur est fermé.

techfoobar

1

@techfoobar belle prise. Cela ne poserait-il pas encore un problème si l'utilisateur revisite le site avant que ce cookie ne soit détruit?

Brannon

3

@Brannon - Oui, si le navigateur reste ouvert et que l'utilisateur re-visite après un certain temps, cela ne sera pas considéré comme une nouvelle visite.

techfoobar

7

si

event.currentTarget.performance.navigation.type

Retour

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

nPcomp
la source

J'ai cette erreur, pouvez-vous l'expliquer davantage? Uncaught TypeError: Impossible de lire la propriété 'currentTarget' de undefined

Janatbek Sharsheyev

2 => TYPE_BACK_FORWARD La page a été accédée en naviguant dans l'historique. developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

Tiago Freitas Leal

performance.navigation.typeest obsolète, veuillez voir ma réponse .

Илья Зеленько

6

J'ai trouvé quelques informations ici Javascript Detecting la page Actualiser . Sa première recommandation consiste à utiliser des champs cachés, qui ont tendance à être stockés via des actualisations 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>

Développer l'extrait

VoronoiPomme de terre
la source

Nous pouvons également vérifier en vérifiant la Refererpropriété et modifier la réponse du serveur sur la base de cette propriété

Adeel

Remarque: la première méthode répertoriée sur cette page échouera car le code s'exécute avant que le DOM n'ait été analysé. Déplacer l' <script>élément vers le bas fonctionnerait - mais ce n'est toujours pas une solution garantie (et la méthode des cookies non plus).

Andy E

1

@Adeel: la vérification Referern'est pas non plus fiable; de nombreux proxys et extensions de navigateur le retirent des requêtes.

Andy E

@VoronoiPotato Veuillez essayer de résumer les informations au lieu de poster uniquement un lien.

Dallin

1

Pour moi, il exécute toujours la condition "si" et n'exécute jamais la partie "autre", peu importe que je charge la page ou que je rafraîchisse la page.

Parth Vora

6

J'ai écrit cette fonction pour vérifier les deux méthodes en utilisant l'ancienne window.performance.navigationet la nouvelle 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: clic sur un lien, saisie de l'URL dans la barre d'adresse du navigateur, soumission de formulaire, clic sur un signet, initialisation via une opération de script.

1: en cliquant sur le bouton Recharger ou en utilisantLocation.reload()

2: Utilisation de l'historique du navigateur (Bakc et Forward).

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

4: toute autre méthode.

Ali Sheikhpour
la source

1

J'ai trouvé des informations ici Détection Javascript Actualisation de la page

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

window.onbeforeunload = UnLoadWindow;

Manpreet
la source

3

où est Ici" ? avez-vous oublié le lien?

ᴄʀᴏᴢᴇᴛ

0

if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}

Alexis Gatuingt
la source

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

Réponses:

Nouvelle norme 2018-maintenant (PerformanceNavigationTiming)

PerformanceNavigationTiming.type

Support le 08/07/2019

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