Comment puis-je supprimer un fragment de hachage d'URL sans actualiser la page ?

Suppression du fragment de hachage d'URL sans actualisation

Dans le paysage de développement Web moderne d'aujourd'hui, supprimer le fragment de hachage (#quelque chose) d'une URL ( par exemple, http://example.com#something) est une exigence courante. Bien qu'une approche simple comme définir "window.location.hash = ''" puisse sembler intuitive, elle ne résout pas complètement le problème.

Pour supprimer efficacement le hachage sans actualiser la page, nous nous tournons vers le HTML5. API d'historique. Cette API offre la possibilité de manipuler l'URL dans la barre d'adresse au sein du domaine actuel.

La fonction JavaScript suivante exploite l'API d'historique HTML5 pour supprimer le fragment de hachage :

function removeHash() {
    history.pushState("", document.title, window.location.pathname + window.location.search);
}

Ce code L'extrait remplace l'URL actuelle par une nouvelle sans le fragment de hachage, poussant le nouvel état dans l'historique du navigateur. Il fonctionne de manière transparente dans les navigateurs modernes comme Chrome, Firefox, Safari, Opera et même IE 10.

Pour les navigateurs qui ne prennent pas en charge l'API History, une approche de dégradation gracieuse peut être utilisée :

function removeHash() {
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

Cette fonction étendue garantit la suppression du hachage dans les navigateurs qui ne prennent pas en charge l'API History, en préservant la position de défilement de la page pour minimiser les perturbations visuelles.

En utilisant ces techniques, vous peut supprimer efficacement le fragment de hachage d'une URL sans déclencher une actualisation de la page, offrant ainsi une expérience utilisateur transparente sur différents navigateurs.

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!