Ricaricare la pagina con JavaScript: location.reload()
Ricaricare una pagina con JavaScript
JavaScript location.reload(): aggiornare una pagina nel modo giusto | We.Inc
Ricarica la pagina con location.reload(), confrontalo con history.go(0), replace e meta refresh, genera codice di aggiornamento a tempo e scopri cosa fa davvero reload(true).
Chiama location.reload() per ricaricare la pagina corrente, esattamente come fa il pulsante di ricarica del browser. Non accetta argomenti standard. La vecchia forma reload(true), pensata per saltare la cache, è un parametro non standard che MDN indica come supportato solo in Firefox, quindi gli altri browser ignorano il true. Anche history.go(0) ricarica.
Modi per aggiornare o spostare la pagina
Codice
Cosa succede
Aggiunge una voce nella cronologia?
location.reload()
Ricarica l'URL corrente
No
history.go(0) o history.go()
Stesso risultato di location.reload()
No
location.replace(url)
Carica url e sostituisce la voce corrente
No, Indietro salta la vecchia pagina
location.assign(url)
Carica url come nuovo passaggio
Sì
<meta http-equiv="refresh" content="30">
Ricarica dopo 30 secondi, senza bisogno di script
No
Ricaricare è una riga di codice, ma i motivi per farlo variano: recuperare nuovi dati, azzerare uno stato bloccato, aggiornare una dashboard a intervalli o forzare una nuova versione del sito. Questa guida mostra la chiamata standard, cosa fanno davvero le varianti più vecchie e come evitare del tutto una ricarica quando ti basta recuperare dati aggiornati.
Scegli un metodo di aggiornamento e un intervallo nel generatore.
Il riquadro del codice si aggiorna con uno snippet pronto da incollare per quel metodo.
Usa i pulsanti per provare location.reload() e history.go(0) su questa pagina. Entrambi la ricaricano.
Leggi la sezione sulla cache prima di contare su una ricarica per mostrare file appena pubblicati.
location.reload() non restituisce nulla e il codice successivo può ancora girare per un attimo prima che la pagina venga scaricata, quindi mettilo per ultimo.
Prima di ricaricare una pagina con un modulo, avvisa dei dati non salvati con un listener beforeunload; il browser mostra il suo messaggio generico, non il tuo.
Un aggiornamento a tempo in una scheda nascosta spreca dati e batteria. Controlla document.visibilityState e salta la ricarica mentre la scheda è in background.
In una single page app, recuperare di nuovo i dati o azzerare lo stato è di solito più veloce e conserva posizione di scroll, input e focus.
Domande frequenti
location.reload(true) svuota la cache?
Non in modo affidabile. L'argomento forceGet non fa parte dello standard HTML, e MDN segnala che solo Firefox lo supporta. Gli altri browser lo ignorano ed eseguono una ricarica normale. Per essere sicuro che le persone ricevano i nuovi file, aggiungi una versione agli URL degli asset o imposta header Cache-Control corretti.
Qual è la differenza tra location.reload() e location.href = location.href?
reload() ricarica sempre il documento corrente. Assegnare href avvia una navigazione verso quell'URL, e quando l'URL contiene un #frammento il browser scorre solo fino al frammento, quindi non si ricarica nulla. Usa reload() quando vuoi una ricarica.
Come aggiorno una pagina ogni 30 secondi?
Senza script, aggiungi <meta http-equiv="refresh" content="30"> all'head. Con uno script, setTimeout(() => location.reload(), 30000). Usa l'aggiornamento automatico con parsimonia: MDN avverte che gli aggiornamenti inattesi possono disorientare le persone e contrastare con le indicazioni WCAG sui tempi.
Uno script può ricaricare una pagina di un altro sito?
No. Chiamare reload sul Location di un'altra origine lancia una SecurityError DOMException, quindi uno script dentro un iframe di un sito diverso non può ricaricare la pagina padre, e la pagina padre non può ricaricarlo in quel modo.
Come ricarico la pagina una sola volta?
Segna che hai già ricaricato, per esempio con un flag in sessionStorage o un parametro di query come ?r=1, e controllalo prima di chiamare reload. Senza una protezione, il codice che ricarica al caricamento crea un ciclo infinito.
Ricaricare o recuperare dati aggiornati
Una ricarica completa butta via l'intera pagina: il DOM, ogni variabile, i menu aperti, i dati digitati e di solito la posizione di scroll. È l'azzeramento giusto quando la pagina è in uno stato errato o deve caricarsi una nuova versione.
Quando ti servono solo numeri nuovi su una dashboard, chiama fetch, aggiorna la parte della pagina che è cambiata e lascia il resto. È più veloce, usa meno dati e non fa lampeggiare lo schermo.
Perché una ricarica può ancora mostrare vecchi file
Una ricarica normale permette al browser di riconvalidare i file in cache con il server, ma i file serviti con una lunga durata di cache possono comunque arrivare direttamente dalla cache. Il codice che prova a forzare un hard refresh da JavaScript non può risolvere questo problema su tutti i browser.
La soluzione affidabile sta sul server e nella build: metti un hash del contenuto nei nomi dei file di script e stile così ogni deploy ottiene nuovi URL, e servi l'HTML con una durata di cache breve o con no-cache così punta sempre ai file più recenti.
Codice di ricarica da incollare
Un pulsante di ricarica
Il gestore del clic chiama la ricarica standard senza argomenti.
Aggiornare a tempo, ma solo mentre la scheda è visibile
Le schede nascoste vengono saltate, e una scheda che torna visibile dopo l'intervallo si ricarica subito.
Ricaricare esattamente una volta
Il flag in sessionStorage sopravvive alla ricarica nella stessa scheda, quindi il secondo caricamento la salta.
Avvisare prima di ricaricare con modifiche non salvate
I browser mostrano l'avviso solo dopo che la persona ha interagito con la pagina, e usano la propria formulazione.
Generatore di codice di aggiornamento
Scegli come e ogni quanto la pagina deve aggiornarsi, poi copia lo snippet.
Metodo
Ricarica ora
Timer JavaScript
Timer, solo con scheda visibile
Meta refresh HTML
Ogni {n} secondi
Snippet
Provalo su questa pagina
location.reload()
history.go(0)
Entrambi i pulsanti ricaricano questa pagina. Tutto ciò che hai digitato sopra andrà perso.