Wie erkennt man URL-Änderungen, einschließlich Hash-Änderungen, in JavaScript?

Erkennen von URL-Änderungen mit Hash in JavaScript

Das Beobachten von Änderungen in einer URL, einschließlich derjenigen nach dem Hash-Symbol, ist für Anwendungen, die AJAX verwenden, von entscheidender Bedeutung für Seitenaktualisierungen. JavaScript bietet mehrere Optionen zum Verfolgen von URL-Änderungen.

Ereignishandler

JavaScript bietet Ereignishandler, die zum Erkennen von URL-Änderungen verwendet werden können:

• onload: Dieses Ereignis eignet sich nicht zur Erkennung von URL-Änderungen nach der ersten Seite laden.
• hashchange: Dieses Ereignis wird nur ausgelöst, wenn sich der Teil nach dem Hash-Symbol ändert, nicht jedoch bei anderen URL-Änderungen.

Manuelle Überprüfung die URL

Das Abfragen der URL in regelmäßigen Abständen ist ein grober, aber zuverlässiger Ansatz zur Erkennung von Änderungen. Es erfordert jedoch einen laufenden Timer und ist rechenintensiv.

Erweiterte Verlaufs-API

Moderne Browser unterstützen die Navigations-API, die ein spezielles „Navigations“-Ereignis bereitstellt. Dieses Ereignis wird immer dann ausgelöst, wenn sich der Standort ändert, unabhängig von der Ursache (z. B. pushState, replaceState, Hash-Änderung).

Polyfill für ältere Browser

Für Browser, die nicht Um die Navigations-API nicht zu unterstützen, kann das folgende geänderte Verlaufsobjekt implementiert werden:

(function() {
    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'));
    });
})();

Diese Änderung fügt eine benutzerdefinierte „Standortänderung“ hinzu. Ereignis, das alle Verlaufsvorgänge (pushState, replaceState, popstate) auslöst und das Anhängen von Ereignis-Listenern zum Erkennen von URL-Änderungen ermöglicht.

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