Comment détecter les modifications d'URL après le symbole de hachage en JavaScript ?

Détection des modifications d'URL dans JavaScript après le symbole de hachage

JavaScript offre des moyens de détecter si une URL a changé, notamment les options suivantes :

• En cours de chargement Événement :

  • L'événement onload n'est pas déclenché lorsque l'URL change après le symbole dièse.

• Gestionnaire d'événements pour URL :

  • Il n'existe aucun gestionnaire d'événements intégré spécifiquement pour détecter l'URL. changements.

• Vérification de l'URL toutes les secondes :

  • Bien que vérifier constamment l'URL toutes les secondes peut fonctionner, c'est inefficace et peut entraîner des problèmes de performances.

L'utilisation l'API de navigation (pour les navigateurs modernes)

Les principaux navigateurs prennent désormais en charge l'API de navigation, qui offre un moyen plus efficace de détecter les modifications d'URL :

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

Événement personnalisé pour les navigateurs plus anciens

Pour les navigateurs plus anciens sans API de navigation, un écouteur d'événements personnalisé peut être créé en modifiant l'historique object :

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

Maintenant, vous pouvez écouter les modifications d'URL à l'aide de l'événement "locationchange" :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!