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.

javascript page-refresh

— Ahmed
fonte

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 .

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

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

Espandi frammento

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

— Rahul Jain
fonte

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.

— DitherSky
fonte

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

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

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

— techfoobar
fonte

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.

— nPcomp
fonte

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>

Espandi frammento

— VoronoiPotato
fonte

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.

— Ali Sheikhpour
fonte

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;

— Manpreet
fonte

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

— Alexis Gatuingt
fonte

Controlla se la pagina viene ricaricata o aggiornata in JavaScript

Nuovo standard 2018-now (PerformanceNavigationTiming)

PerformanceNavigationTiming.type

Supporto il 08-07-2019

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