back to top

Ricaricare automaticamente una pagina web (refresh automatico)

In certe situazioni puรฒ essere utile effettuare il reload (o refresh) automatico della pagina visualizzata dall’utente. I motivi di un aggiornamento automatico di una pagina web possono essere diversi: ad esempio, su un sito di notizie, un refresh periodico della pagina puรฒ assicurare che i contenuti visualizzati siano sempre aggiornati, su un sito di e-commerce, invece, l’aggiornamento automatico puรฒ essere utile per mostrare in tempo reale la disponibilitร  di un prodotto o il prezzo corrente, migliorando cosรฌ l’esperienza dell’utente.

Per implementare l’aggiornamento automatico di una pagina web si puรฒ ricorrere a Javascript o al semplice HTML. In questo articolo vedremo le diverse tecniche ed esempi pratici per una loro corretta implementazione.

Ricaricare la pagina con Javascript

La tecnica piรน utilizzata per ricaricare la pagina corrente consiste nell’utilizzo del metodo reload dell’oggetto location, in questo modo

window.location.reload()

In alternativa รจ possibile utilizzare history specificando “0” per il metodo go() in questo modo:

history.go(0)

oppure, infine, possiamo utilizzare location.href in questo modo:

window.location.href=window.location.href

Abbiamo detto che il refresh della pagina puรฒ essere automatico (tra poco vedremo come fare) ma nulla vieta, ovviamente, di consentire all’utente di effettuarlo manualmente. Di seguito l’esempio di un bottone che, una volta premuto, ricarica la pagina corrente:

<input type="button" value="Ricarica la pagina" onclick="window.location.reload()">

Ricaricare la pagina dopo tot. secondi

Solitamente, come detto all’inizio dell’articolo, il refresh di pagina viene temporizzato, cioรจ avviato automaticamente dopo X secondi dal caricamento della pagina (molti quotidiani on-line utilizzano questa tecnica per mostrare sempre le ultime news). Questo il codice:

// imposto un refresh di pagina dopo 60 secondi
setTimeout(function() {
  window.location.reload()
}, 60000);

Il codice proposto ricarica la pagina una volta sola dopo 60 secondi. Se vogliamo possiamo implementare anche un aggiornamento periodico sostituendo setTimeout() con setInterval() in questo modo:

// Imposto il refresh di pagina ogni 60 secondi
setInterval(function() {
window.location.reload();
}, 60000);

E’ bene ricordare che questa tecnica puรฒ essere fastidiosa per l’utente perchรฉ potrebbe interrompere la sua lettura dei contenuti, quindi il consiglio รจ di utilizzarla con prudenza e solo se necessario.

Utilizzare i meta-tag di HTML per effettuare il refresh della pagina

Anche grazie ai meta-tag di HTML รจ possibile, tra le altre cose, impostare un refresh automatico della pagina. In altre parole, possiamo fare in modo che la pagina corrente venga ricaricata in automatico senza alcuna interazione volontaria da parte dell’utente.

Di seguito il codice da inserire tra i tag <head> e </head> della nostra pagina web:

<meta http-equiv="refresh" content="60">

Grazie a questo meta-tag, la URL corrente verrร  ricaricata dopo 60 secondi. รˆ importante notare che questo approccio potrebbe non essere ideale per l’esperienza utente, poichรฉ un refresh non richiesto potrebbe disturbare la lettura o l’utilizzo della pagina. Inoltre, il meta-tag refresh puรฒ anche essere utilizzato per creare dei redirect in puro HTML, ad esempio:

<meta http-equiv="refresh" content="5; url=https://www.example.com/">

Questo codice effettuerร  un redirect verso una nuova URL dopo 5 secondi.

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Infinite scroll, come programmarlo su AMP e su Web con Javascript

L'infinite scroll è una tecnica di design e navigazione...

Codice Fiscale: 5 javascript per la verifica e il calcolo

Il codice fiscale รจ un identificativo tributario univoco che...

Math.ceil() – Arrotondare per eccesso con Javascript

Il metodo ceil() dell'oggetto Math di Javascript è utilizzato...

Minificare Javascript: librerie e strumenti online per comprimere il sorgente JS

La minificazione è un processo abbastanza diffuso nell'implementazione delle...

Javascript: svuotare un campo input o una textarea con un click

Quando si fornisce agli utenti un modulo per l'inserimento...

6 video player HTML5 per il tuo sito web

Con il rilascio delle specifiche definitive per HTML5 molte...
Pubblicitร