L’evento popstate
Reagire alla navigazione avanti e indietro del browser
L’evento popstate è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Che cosa fa popstate
L'evento popstate viene generato su window quando l'utente naviga nella cronologia, usando il pulsante Indietro, Avanti o una chiamata JavaScript a history.back. Consente alla SPA di eseguire nuovamente il rendering della vista corretta in risposta alla navigazione avviata dal browser.
Quando viene generato
popstate viene generato quando si fa clic sui pulsanti Indietro o Avanti, con history.back(), history.forward() e history.go(n). NON viene generato quando si chiamano manualmente pushState o replaceState: si tratta di aggiornamenti programmatici, di cui la pagina è già a conoscenza.
window.addEventListener("popstate", (e) => {
console.log("Navigated to", location.pathname, "state:", e.state);
renderPage(location.pathname);
});La proprietà state
La proprietà state dell'evento contiene l'oggetto di stato passato a pushState o replaceState per la voce verso cui si sta navigando. Lo utilizzi per ripristinare lo stato dell'interfaccia che non è contenuto nell'URL, ad esempio la scheda aperta o la posizione di scorrimento.
Leggere il nuovo URL
La barra degli indirizzi è già aggiornata quando viene generato popstate. Legga location.pathname, location.search e location.hash per individuare il nuovo URL. Insieme allo stato, queste informazioni sono tutto ciò che serve per eseguire il rendering della vista di destinazione.
Caricamento iniziale della pagina
popstate NON viene generato al caricamento iniziale della pagina, ma solo durante la navigazione. Esegua il rendering della vista iniziale a partire da location all'avvio, quindi lasci che popstate gestisca le navigazioni successive. Senza questa operazione, la pagina iniziale rimane vuota quando il primo ritorno indietro la raggiunge.
// Initial render
renderPage(location.pathname);
// Future navigation
window.addEventListener("popstate", () => renderPage(location.pathname));hashchange e popstate
Nel routing basato esclusivamente sugli hash, con URL come /#/about, l'evento hashchange viene generato quando cambia l'hash. popstate viene generato anche per i cambi di percorso. Le SPA moderne utilizzano la History API e popstate; il routing basato sugli hash è ormai legacy.
Intercettare i clic
Per fare in modo che un clic su un normale elemento <a> attivi la navigazione lato client, intercetti il clic, chiami preventDefault e poi pushState + renderPage. Verifichi la presenza dei tasti modificatori, ad esempio Cmd/Ctrl per aprire una nuova scheda, e li lasci gestire dal comportamento predefinito.
document.addEventListener("click", (e) => {
const a = e.target.closest("a");
if (!a || a.target || e.metaKey || e.ctrlKey) return;
e.preventDefault();
history.pushState(null, "", a.href);
renderPage(location.pathname);
});Ripristinare la posizione di scorrimento
I browser tentano di ripristinare automaticamente la posizione di scorrimento durante la navigazione all'indietro, ma nelle SPA il risultato non è affidabile perché il contenuto viene eseguito il rendering in modo asincrono. Salvi la posizione di scorrimento nello stato di pushState e la ripristini in popstate: window.scrollTo(0, e.state?.scroll ?? 0).
Limiti del rendering asincrono
Se renderPage recupera i dati in modo asincrono, l'URL viene aggiornato prima che arrivi il contenuto. Mostri uno stato di caricamento, quindi esegua il rendering. Eviti le condizioni di competizione in cui l'utente fa clic su Indietro durante un recupero e il risultato del recupero annullato sovrascrive la nuova vista.
Router dei framework
React Router, il router di Vue Router e quello di SvelteKit racchiudono History + popstate. Anche senza un framework, il primitivo sottostante è lo stesso: ascoltare popstate, intercettare i link e chiamare pushState. Quando l'overhead è importante, può creare un router personalizzato in circa 50 righe di JavaScript vanilla.
Problema comune: perdite di memoria
La configurazione di ogni vista può aggiungere listener di eventi e timer. Senza un teardown esplicito quando la vista cambia, in popstate o nel wrapper di pushState, i listener si accumulano e degradano le prestazioni nel tempo. Tenga traccia delle sottoscrizioni di ogni vista con un AbortController e lo annulli quando cambia la vista.
Verifica delle conoscenze
Perché l'evento popstate NON viene generato quando si chiama direttamente history.pushState?
Riepilogo
popstate viene generato durante la navigazione avanti o indietro del browser e consente di accedere allo stato salvato e alla nuova posizione. Non viene generato da pushState o replaceState, perché il codice ne è già a conoscenza, né al caricamento iniziale della pagina, durante il quale il rendering deve essere eseguito manualmente. Intercetti i clic sui link per la navigazione della SPA, salvi la posizione di scorrimento nello stato e rimuova i listener quando cambia la vista per prevenire perdite di memoria.
Domande Frequenti
La lezione «L’evento popstate» è gratuita?
Sì — il testo completo di «L’evento popstate» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «L’evento popstate»?
Reagire alla navigazione avanti e indietro del browser Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «L’evento popstate»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- pushState e replaceState
- L’evento popstate
- Routing basato su hash e su path a confronto
- La Navigation API nei browser moderni