Comment détecter de manière fiable les modifications d'URL en JavaScript ?

Détection des modifications d'URL en JavaScript

Pour suivre les modifications d'URL en JavaScript, il est crucial d'identifier une méthode fiable. Bien que l'événement onload ne soit pas adapté, il existe plusieurs options viables.

1. Événement de changement de hachage :

Cet événement se déclenche uniquement lorsque la partie de l'URL après le symbole # change. Il est limité aux modifications liées au hachage.

2. Événement Popstate :

Cet événement se produit lorsque les boutons de navigation de l'historique du navigateur (par exemple, Précédent et Suivant) sont utilisés ou lorsque l'URL change via les méthodes pushState ou replaceState. Cependant, cela peut ne pas fonctionner dans tous les cas.

3. Événement de changement d'emplacement personnalisé (recommandé) :

Pour garantir une détection complète des modifications d'URL, un écouteur d'événement personnalisé, « locationchange », peut être implémenté. Cela implique de modifier l'objet d'historique pour déclencher des événements personnalisés pour tous les changements d'état de l'historique (c'est-à-dire pushState, replaceState et popstate).

Mise en œuvre :

// Create a custom locationchange event
window.addEventListener('locationchange', () => {
    console.log('Location changed!');
});

// Modify history object to trigger custom events
(() => {
    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'));
    });
})();

Par en utilisant cet événement personnalisé, vous pouvez détecter efficacement tout changement d'URL, qu'il se produise via un hachage, pushState ou replaceState. Cette méthode fournit une solution complète pour surveiller les modifications d'URL dans les applications JavaScript.

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!