JustZix funktioniert auf dynamischen (SPA-)Seiten ohne F5
Immer mehr Seiten sind Single-Page-Anwendungen (SPAs): Sie klicken, die Adressleiste ändert sich, aber die Seite lädt nicht erneut. JustZix bemerkte solche Änderungen früher nicht — auf einen URL-Pfad abgeglichene Regeln erschienen erst nach einem F5. Dieser Beitrag erklärt, was sich geändert hat und warum es wichtig ist.
Was Navigation ohne Neuladen bedeutet
Auf einer klassischen Seite ist jeder Übergang ein frisches Laden des Dokuments. Eine SPA tauscht stattdessen den Inhalt im laufenden Betrieb aus und aktualisiert die Adresse über history.pushState oder replaceState. So funktionieren das Google-Ads-Panel, viele Admin-Dashboards und moderne Web-Apps.
Das Problem: Regeln, die auf der ersten URL „eingefroren“ sind
JustZix gleicht Regeln auf ein URL-Muster ab. Da das Skript auf der Seite die URL nur bei den Ereignissen DOMContentLoaded und load prüfte, wurde der Abgleich nach einer Navigation innerhalb einer SPA nicht aktualisiert. Die schwebende Schaltfläche, Aktionsleisten, In-Page-Fenster und eingefügtes CSS erschienen oder verschwanden erst nach einem manuellen Neuladen der Seite.
Die Lösung: drei Erkennungskanäle
Die Erweiterung erkennt SPA-Navigation jetzt über drei Kanäle: die Ereignisse popstate und hashchange sowie einen Beobachter von Dokumentänderungen. Sie alle münden in einen einzigen günstigen Wächter, der location.href vergleicht — der Regelabgleich läuft nur erneut, wenn sich die Adresse tatsächlich geändert hat, sodass er die Seite nicht belastet.
Was es Ihnen in der Praxis bringt
Regeln, die auf einen bestimmten Pfad abgeglichen sind — zum Beispiel nur /campaigns in einem Anzeigen-Panel — schalten sich ein und aus, während Sie sich durch die App klicken, ohne F5. Dasselbe gilt für Aktionsleisten und Fenster, die an ein URL-Muster angeheftet sind.
Tipp: SPA-robuste JS-Regeln schreiben
Die Erweiterung selbst reagiert jetzt auf Adressänderungen, aber Ihr eigener JS-Code sollte das auch. Wenn eine Regel Elemente verändert, die die SPA später rendert, wickeln Sie die Logik in einen MutationObserver ein, damit sie auch funktioniert, nachdem Inhalt nachgeladen wurde:
// Auch ausführen, nachdem die SPA Inhalt nachgeladen hat
function applyTweak() {
document.querySelectorAll('.widget').forEach(el => {
el.style.outline = '2px solid #006870';
});
}
applyTweak();
new MutationObserver(applyTweak).observe(document.body, {
childList: true, subtree: true,
});Vorteile
Regeln funktionieren sofort, ohne manuelles Neuladen. Das Verhalten ist auf SPA-Panels einheitlich — Google Ads, Admin-Dashboards und Web-Apps. Und das URL-Pfad-Abgleichen ist endlich vollständig zuverlässig.
Fertige Regeln für viele Seiten finden Sie im Beispielkatalog. Installieren Sie JustZix und testen Sie Ihre Regeln auf einer beliebigen SPA.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.