Wie erkennt man URL-Änderungen in JavaScript?

So erkennen Sie URL-Änderungen in JavaScript mit Ereignis-Listenern

Die Überwachung von URL-Änderungen ist für viele JavaScript-Anwendungen von entscheidender Bedeutung, insbesondere für solche, die AJAX und Single verwenden -Seitenarchitekturen. In diesem Artikel untersuchen wir die verschiedenen verfügbaren Methoden zur Erkennung von URL-Änderungen und erkunden den effektivsten Ansatz.

Ereignishandler für URL-Änderungen

Es gibt mehrere Ereignishandler Dies kann zum Verfolgen von URL-Änderungen in JavaScript verwendet werden. Zu den häufigsten gehören:

• 'hashchange'-Ereignis: Überwacht Änderungen im Teil der URL, der auf das '#'-Symbol folgt.
• „popstate“-Ereignis: Wird aktiviert, wenn die Zurück- oder Vorwärts-Schaltflächen des Browsers verwendet werden oder wenn das Verlaufsobjekt geändert wird (z. B. über pushState oder replaceState).

Diese Ereignishandler bieten eine zuverlässige Möglichkeit um URL-Änderungen zu erkennen, sie haben jedoch Einschränkungen. Das „hashchange“-Ereignis wird nur ausgelöst, wenn sich das Fragment nach dem „#“ ändert, während das „popstate“-Ereignis möglicherweise nicht immer zuverlässig ausgelöst wird.

Benutzerdefiniertes Ereignis für umfassende URL-Überwachung

Um die Einschränkungen vorhandener Ereignishandler zu überwinden, kann ein benutzerdefiniertes Ereignis erstellt werden, um alle URL-Änderungen zu überwachen. Durch Ändern des Verlaufsobjekts können wir sicherstellen, dass jedes Mal, wenn die URL über pushState, replaceState oder das Popstate-Ereignis aktualisiert wird, ein benutzerdefiniertes „locationchange“-Ereignis ausgelöst wird.

Hier ist der Code zum Implementieren des benutzerdefinierten Ereignisses:

(() => {
    let oldPushState = history.pushState;
    history.pushState = function pushState() {
        let ret = oldPushState.apply(this, arguments);
        window.dispatchEvent(new Event('pushstate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    let oldReplaceState = history.replaceState;
    history.replaceState = function replaceState() {
        let ret = oldReplaceState.apply(this, arguments);
        window.dispatchEvent(new Event('replacestate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    window.addEventListener('popstate', () => {
        window.dispatchEvent(new Event('locationchange'));
    });
})();

Mit dieser Änderung können Sie jetzt einen Ereignis-Listener für das Ereignis „locationchange“ hinzufügen, um alle URL-Änderungen zuverlässig zu erkennen.

Fazit

Die Verwendung von Ereignishandlern oder die Implementierung eines benutzerdefinierten Ereignisses bietet effektive Methoden zur Überwachung von URL-Änderungen in JavaScript. Jeder Ansatz hat seine eigenen Vorteile und Einschränkungen. Durch das Verständnis dieser Optionen und die Auswahl des am besten geeigneten Ansatzes basierend auf den spezifischen Anforderungen können Entwickler sicherstellen, dass ihre Anwendungen effektiv auf URL-Änderungen reagieren.

Das obige ist der detaillierte Inhalt vonWie erkennt man URL-Änderungen in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!