Comment détecter les modifications d'URL en JavaScript ?

Comment détecter les modifications d'URL en JavaScript avec des écouteurs d'événements

La surveillance des modifications d'URL est cruciale pour de nombreuses applications JavaScript, en particulier celles qui utilisent AJAX et des applications uniques. architectures de pages. Dans cet article, nous examinerons les différentes méthodes disponibles pour détecter les modifications d'URL et explorerons l'approche la plus efficace.

Gestionnaires d'événements pour les modifications d'URL

Il existe plusieurs gestionnaires d'événements qui peut être utilisé pour suivre les modifications d’URL en JavaScript. Les plus courants incluent :

• Événement 'hashchange' : surveille les modifications dans la partie de l'URL qui suit le symbole '#'.
• Événement 'popstate' : activé lorsque les boutons Précédent ou Suivant du navigateur sont utilisés ou lorsque l'objet d'historique est modifié (par exemple, via pushState ou replaceState).

Ces gestionnaires d'événements fournissent un moyen fiable pour détecter les changements d'URL, mais ils ont des limites. L'événement 'hashchange' ne se déclenche que lorsque le fragment après le '#' change, tandis que l'événement 'popstate' peut ne pas toujours se déclencher de manière fiable.

Événement personnalisé pour une surveillance complète des URL

Pour surmonter les limitations des gestionnaires d'événements existants, un événement personnalisé peut être créé pour surveiller toutes les modifications d'URL. En modifiant l'objet history, nous pouvons garantir qu'un événement personnalisé « locationchange » est déclenché chaque fois que l'URL est mise à jour via pushState, replaceState ou l'événement popstate.

Voici le code pour implémenter l'événement personnalisé :

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

Avec cette modification, vous pouvez désormais ajouter un écouteur d'événement pour l'événement 'locationchange' afin de détecter de manière fiable tout changement d'URL.

Conclusion

L'utilisation de gestionnaires d'événements ou la mise en œuvre d'un événement personnalisé fournissent des méthodes efficaces pour surveiller les modifications d'URL en JavaScript. Chaque approche a ses propres avantages et limites. En comprenant ces options et en choisissant l'approche la plus appropriée en fonction des exigences spécifiques, les développeurs peuvent garantir que leurs applications répondent efficacement aux modifications d'URL.

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!