Controlla se la pagina viene ricaricata o aggiornata in JavaScript


186

Voglio verificare quando qualcuno tenta di aggiornare una pagina.

Ad esempio, quando apro una pagina non succede nulla, ma quando aggiorno la pagina dovrebbe visualizzare un avviso.


1
Non è possibile senza il codice lato server. A cosa ti serve? Forse se dai un quadro più ampio possiamo suggerire una migliore alternativa.
Shadow Wizard è Ear For You,

Forse potresti fare qualcosa come un cookie ... come memorizzare l'ora e ricaricare la differenza di tempo.
Felix Kling,

Voglio fare come link di Facebook sarà #! / Qualunque cosa che voglio rimuovere #! quando solo la pagina viene ricaricata
Ahmed il

1
@Ahmed Sto provando a fare la stessa cosa. Qualcuno delle soluzioni seguenti ha funzionato per te?
Paul Fitzgerald,

3
⚠️⚠️⚠️ window.performance.navigation.typeè deprecato, per favore vedi la mia risposta .
Илья Зеленько,

Risposte:


221

Depr window.performance.navigation.typeè deprecato, per favore vedi la risposta di Илья Зеленько


Un modo migliore per sapere che la pagina è effettivamente ricaricata consiste nell'utilizzare l'oggetto navigator che è supportato dalla maggior parte dei browser moderni.

Utilizza l' API di timing di navigazione .

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

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


1
grazie amico questa è una soluzione accurata per rilevare la pagina viene ricaricata dal clic destro / aggiorna dal browser o ricaricata dall'URL.
Roque Mejos,

4
Attenzione, Chris ha recentemente cambiato questo comportamento. Quando l'utente fa clic sulla barra degli indirizzi corrente e preme Invio, il valore di performance.navigation.type sarà 1, che dovrebbe essere 0. Ho verificato nella versione 56. Non so perché.
Jackwin ha suonato il

1
Il modo in cui funziona è come previsto, qualsiasi interazione con la pagina che forza un nuovo stato di navigazione nella stessa pagina è considerata un aggiornamento. Quindi, a seconda del codice, questo è estremamente utile, sia per registrarsi ogni volta che la pagina è stata aggiornata, ricaricata o qualsiasi interazione Ajax. Posso darci molti usi per funzionalità e analisi.
raphie,

27
performance.navigation.type == performance.navigation.TYPE_RELOADè più facile da leggere anziché == 1. Inoltre, se controlli performance.navigationtroverai che ci sono 4 tipi di navigazione TYPE_BACK_FORWARDTYPE_NAVIGATE
differenti

5
⚠️⚠️⚠️ window.performance.navigation.typeè deprecato, per favore vedi la mia risposta .
Илья Зеленько,

37

Il primo passo è verificare la presenza sessionStoragedi un valore predefinito e se esiste un avviso utente:

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

Il secondo passo è impostare sessionStorageun valore (ad esempio true):

sessionStorage.setItem("is_reloaded", true);

Valori di sessione mantenuti fino alla chiusura della pagina, quindi funzionerà solo se la pagina viene ricaricata in una nuova scheda con il sito. È inoltre possibile mantenere il conteggio di ricarica allo stesso modo.


28
Due cose da tenere presente: 1). È possibile archiviare solo i valori di stringa nella sessione e nella memoria locale. Pertanto trueviene convertito in "true". 2). L'archiviazione della sessione persiste fino a quando l'utente non chiude la finestra del browser, quindi non è possibile distinguere tra il ricaricamento della pagina e la navigazione da e verso il sito all'interno della stessa sessione del browser.
Ettore,

35

Nuovo standard 2018-now (PerformanceNavigationTiming)

window.performance.navigationla proprietà è obsoleta nelle specifiche del Livello di tempo di navigazione 2 . Utilizzare PerformanceNavigationTiminginvece l' interfaccia.

PerformanceNavigationTiming.type

Questa è una tecnologia sperimentale .

Controllare attentamente la tabella di compatibilità del browser prima di utilizzarlo in produzione.

Supporto il 08-07-2019

La proprietà di sola lettura restituisce una stringa che rappresenta il tipo di navigazione. Il valore deve essere uno dei seguenti:

  • navigazione : la navigazione è iniziata facendo clic su un collegamento, inserendo l'URL nella barra degli indirizzi del browser, inviando il modulo o inizializzando un'operazione di script diversa da ricaricare e tornare indietro come elencato di seguito.

  • ricarica - La navigazione avviene tramite l'operazione di ricarica del browser o location.reload().

  • back_forward - La navigazione avviene attraverso l'operazione di attraversamento della cronologia del browser.

  • prerender : la navigazione viene avviata da un suggerimento prerender .

Questa proprietà è di sola lettura.

L'esempio seguente illustra l'utilizzo di questa proprietà.

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

4
+1 per la segnalazione dell'API deprecata, ma -100 per Apple per la mancanza di supporto in iOS ancora nel 2020
kinakuta,

14

Memorizza un cookie la prima volta che qualcuno visita la pagina. All'aggiornamento controlla se il tuo cookie esiste e se lo fa, avvisa.

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

e nel tuo tag body:

<body onload="checkFirstVisit()">

9
Che dire degli utenti di ritorno?
Red Taz,

5
Come @ Rob2211 dice che questo controlla solo se la pagina è stata visitata e può dare un falso positivo fintanto che la pagina viene rivista quando il cookie è ancora attivo. Non utilizzarlo per controllare l'aggiornamento.
Brannon,

@Brannon - Il cookie è stato creato senza alcun valore in scadenza e verrà distrutto alla chiusura del browser.
techfoobar,

1
@techfoobar bella cattura. Ciò non costituirebbe comunque un problema se l'utente rivisiti il ​​sito prima che quel cookie venga distrutto?
Brannon,

3
@Brannon - Sì, se il browser viene lasciato aperto e l'utente visita di nuovo dopo qualche tempo, non verrà considerato come una nuova visita.
techfoobar,

7

Se

event.currentTarget.performance.navigation.type

ritorna

0 => l'utente ha appena digitato un URL
1 => pagina ricaricata
2 => pulsante indietro selezionato.


Ho ricevuto questo errore, puoi spiegarlo di più? Uncaught TypeError: Impossibile leggere la proprietà 'currentTarget' di undefined
Janatbek Sharsheyev

2 => TYPE_BACK_FORWARD È possibile accedere alla pagina navigando nella cronologia. developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation
Tiago Freitas Leal

performance.navigation.typeè deprecato, per favore vedi la mia risposta .
Илья Зеленько,

6

Ho trovato alcune informazioni qui Javascript che rileva l'aggiornamento della pagina . La sua prima raccomandazione è l'uso di campi nascosti, che tendono ad essere memorizzati tramite gli aggiornamenti della pagina.

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>


Possiamo anche verificare controllando la Refererproprietà e modificare la risposta del server sulla base di questa proprietà
Adeel,

Nota a margine: il primo metodo elencato in quella pagina fallirà perché il codice viene eseguito prima che il DOM sia stato analizzato. Spostare l' <script>elemento in basso avrebbe funzionato, ma non è ancora una soluzione garantita (e nemmeno il metodo dei cookie).
Andy E,

1
@Adeel: neanche il controllo Refererè affidabile; molti proxy ed estensioni del browser lo eliminano dalle richieste.
Andy E,

@VoronoiPotato Prova a sintetizzare le informazioni invece di pubblicare solo un link.
Dallin,

1
Per me, esegue sempre la condizione "if" e non esegue mai la parte "else", non importa se ho caricato la pagina o aggiornato la pagina.
Parth Vora,

6

Ho scritto questa funzione per controllare entrambi i metodi usando vecchio window.performance.navigatione nuovo performance.getEntriesByType("navigation")contemporaneamente:

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

Descrizione del risultato:

0: facendo clic su un collegamento, inserendo l'URL nella barra degli indirizzi del browser, inviando il modulo, facendo clic sul segnalibro, inizializzando tramite un'operazione di script.

1: facendo clic sul pulsante Ricarica o utilizzandoLocation.reload()

2: utilizzo della cronologia del browser (Bakc e Forward).

3: attività di prerendering come<link rel="prerender" href="https://stackoverflow.com//example.com/next-page.html">

4: qualsiasi altro metodo.


1

Ho trovato alcune informazioni qui Javascript che rileva l'aggiornamento della pagina

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

window.onbeforeunload = UnLoadWindow;

3
dov'è qui" ? hai dimenticato il link?
ᴄʀᴏᴢᴇᴛ

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.