← Tutti gli articoli

Tutorial

JustZix funziona sulle pagine dinamiche (SPA) senza un F5

Sempre più siti sono applicazioni a pagina singola (SPA): clicchi, la barra degli indirizzi cambia, ma la pagina non si carica di nuovo. JustZix non notava questi cambiamenti — le regole abbinate a un percorso URL comparivano solo dopo un F5. Questo articolo spiega cosa è cambiato e perché è importante.

Cosa significa navigazione senza ricaricamento

Su un sito classico ogni passaggio è un nuovo caricamento del documento. Una SPA invece scambia i contenuti al volo e aggiorna l'indirizzo tramite history.pushState o replaceState. È così che funzionano il pannello di Google Ads, molte bacheche di amministrazione e le moderne app web.

Il problema: regole "congelate" sul primo URL

JustZix abbina le regole a un pattern di URL. Poiché lo script nella pagina controllava l'URL solo sugli eventi DOMContentLoaded e load, l'abbinamento non veniva aggiornato dopo la navigazione all'interno di una SPA. Il pulsante flottante, le barre delle azioni, le finestre nella pagina e il CSS iniettato comparivano o scomparivano solo dopo un ricaricamento manuale della pagina.

La soluzione: tre canali di rilevamento

L'estensione ora rileva la navigazione SPA attraverso tre canali: gli eventi popstate e hashchange e un osservatore dei cambiamenti del documento. Confluiscono tutti in un'unica guardia economica che confronta location.href — l'abbinamento delle regole viene rieseguito solo quando l'indirizzo è effettivamente cambiato, quindi non appesantisce la pagina.

Cosa ti dà nella pratica

Le regole abbinate a un percorso specifico — per esempio solo /campaigns in un pannello pubblicitario — si attivano e disattivano mentre clicchi nell'app, senza un F5. Lo stesso vale per le barre delle azioni e le finestre appuntate a un pattern di URL.

Consiglio: scrivi regole JS resistenti alle SPA

L'estensione stessa ora reagisce ai cambiamenti di indirizzo, ma dovrebbe farlo anche il tuo codice JS. Se una regola modifica elementi che la SPA rende più tardi, avvolgi la logica in un MutationObserver così funziona anche dopo che il contenuto viene caricato:

// Esegui anche dopo che la SPA carica i contenuti
function applyTweak() {
  document.querySelectorAll('.widget').forEach(el => {
    el.style.outline = '2px solid #006870';
  });
}
applyTweak();
new MutationObserver(applyTweak).observe(document.body, {
  childList: true, subtree: true,
});

Vantaggi

Le regole funzionano subito, senza ricaricamento manuale. Il comportamento è coerente sui pannelli SPA — Google Ads, bacheche di amministrazione e app web. E l'abbinamento per percorso URL è finalmente del tutto affidabile.

Le regole pronte per molti siti sono nel catalogo di esempi. Installa JustZix e prova le tue regole su qualsiasi SPA.

Valuta questo articolo

Nessuna valutazione — sii il primo.

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso