Wie erkennt man URL-Änderungen nach dem Hash-Symbol in JavaScript?

URL-Änderungen in JavaScript nach dem Hash-Symbol erkennen

JavaScript bietet Möglichkeiten, zu erkennen, ob sich eine URL geändert hat, einschließlich der folgenden Optionen:

• Onload Ereignis:

  • Das Onload-Ereignis wird nicht ausgelöst, wenn sich die URL nach dem Hash-Symbol ändert.

• Ereignishandler für URL:

  • Es gibt keinen integrierten Event-Handler speziell zum Erkennen von URLs Änderungen.

• URL jede Sekunde überprüfen:

  • Die ständige Überprüfung der URL jede Sekunde kann zwar funktionieren, ist aber ineffizient und kann zu Leistungsproblemen führen.

Verwendung des Navigations-API (für moderne Browser)

Große Browser unterstützen jetzt die Navigations-API, die eine effizientere Möglichkeit zur Erkennung von URL-Änderungen bietet:

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

Benutzerdefiniertes Ereignis für Ältere Browser

Für ältere Browser ohne Navigations-API kann durch Ändern des Verlaufs ein benutzerdefinierter Ereignis-Listener erstellt werden Objekt:

(() => {
    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"));
    });
})();

Jetzt können Sie mithilfe des Ereignisses „locationchange“ auf URL-Änderungen warten:

window.addEventListener("locationchange", function () {
    console.log("location changed!");
});

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