Comment détecter les modifications d'URL, y compris les modifications de hachage, en JavaScript ?

Détection des modifications d'URL avec hachage en JavaScript

Observer les modifications dans une URL, y compris celles après le symbole dièse, est essentiel pour les applications utilisant AJAX pour les mises à jour des pages. JavaScript propose plusieurs options pour suivre les modifications d'URL.

Gestionnaires d'événements

JavaScript propose des gestionnaires d'événements qui peuvent être utilisés pour détecter les modifications d'URL :

• onload : Cet événement n'est pas adapté pour détecter les changements d'URL après la page initiale load.
• hashchange : Cet événement se déclenche uniquement lorsque la partie située après le symbole de hachage change, mais pas pour les autres modifications d'URL.

Vérification manuelle l'URL

Interroger l'URL à intervalles réguliers est une approche grossière mais fiable pour détecter les changements. Cependant, cela nécessite une minuterie continue et est coûteux en termes de calcul.

API d'historique améliorée

Les navigateurs modernes prennent en charge l'API de navigation, qui fournit un événement de « navigation » dédié. Cet événement se déclenche chaque fois que l'emplacement change, quelle qu'en soit la cause (par exemple, pushState, replaceState, changement de hachage).

Polyfill pour les navigateurs hérités

Pour les navigateurs qui ne le font pas. Ne prenant pas en charge l'API de navigation, l'objet d'historique modifié suivant peut être implémenté :

(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 modification ajoute un événement "locationchange" personnalisé qui déclenche toutes les opérations d'historique (pushState, replaceState, popstate) et permet d'attacher des écouteurs d'événements pour détecter les 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!