Wie kann ich URL-Änderungen nach dem Hash in JavaScript erkennen?

URL-Änderungen nach dem Hash in JavaScript erkennen

Bei der Arbeit mit AJAX-basierten Websites wie GitHub kann festgestellt werden, ob sich die URL geändert hat entscheidend. JavaScript ermöglicht verschiedene Methoden zur Überwachung von URL-Änderungen.

Optionen zum Erkennen von URL-Änderungen:

• Onload-Ereignis: Dieses Ereignis wird nur ausgelöst Wenn die Seite vollständig neu geladen wird, eignet sie sich daher nicht zur Erkennung teilweiser URL-Änderungen.
• URL-Ereignis Handler: JavaScript bietet keinen direkten Ereignishandler für URL-Änderungen.
• Regelmäßige URL-Prüfungen: Die ständige Überprüfung der URL jede Sekunde kann ressourcenintensiv und unpraktisch sein.

Verbesserte Methode: Navigations-API (2024)

Modern Browser unterstützen jetzt die Navigations-API, die eine effizientere Möglichkeit bietet, URL-Änderungen zu erkennen. So funktioniert es:

window.navigation.addEventListener("navigate", (event) => {
  console.log('location changed!');
});

Alternative Methode (Pre-Navigation API)

Wenn die Navigations-API nicht verfügbar ist, kann ein benutzerdefinierter Ansatz mithilfe der verwendet werden Folgender Code:

(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 Lösung ändert das Verlaufsobjekt, um Funktionen hinzuzufügen, die die Erstellung benutzerdefinierter Ereignis-Listener ermöglichen, z als:

window.addEventListener('locationchange', () => {
    console.log('location changed!');
});

Das obige ist der detaillierte Inhalt vonWie kann ich URL-Änderungen nach dem Hash in JavaScript erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!