Comment puis-je détecter les modifications d'URL après le hachage en JavaScript ?

Détection des modifications d'URL après le hachage en JavaScript

Lorsque vous travaillez avec des sites Web basés sur AJAX comme GitHub, déterminer si l'URL a changé peut être crucial. JavaScript permet différentes méthodes pour surveiller les modifications d'URL.

Options de détection des modifications d'URL :

• Événement onload : Cet événement se déclenche uniquement lorsque la page se recharge complètement, elle ne convient donc pas pour détecter des modifications partielles d'URL.
• Événement d'URL Gestionnaire : JavaScript ne fournit pas de gestionnaire d'événements direct pour les modifications d'URL.
• Vérifications d'URL régulières : Vérifier constamment l'URL toutes les secondes peut être gourmand en ressources et peu pratique.

Méthode améliorée : API de navigation (2024)

Les navigateurs modernes prennent désormais en charge l'API de navigation, qui offre un moyen plus efficace de détecter les modifications d'URL. Voici comment cela fonctionne :

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

Méthode alternative (API de pré-navigation)

Si l'API de navigation n'est pas disponible, une approche personnalisée peut être utilisée à l'aide de l'API de navigation. code suivant :

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

Cette solution modifie l'objet historique pour ajouter des fonctionnalités, permettant la création d'écouteurs d'événements personnalisés, tels que comme :

window.addEventListener('locationchange', () => {
    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!