Comment supprimer un hachage d'URL sans actualiser la page à l'aide de JavaScript ?

Suppression du hachage de l'URL sans actualisation de la page à l'aide de JavaScript

Lorsque vous rencontrez des URL telles que "http://example.com#something" avec un composant de hachage (#) à la fin, le supprimer sans actualiser la page peut s'avérer difficile. Les méthodes traditionnelles impliquant la définition de "window.location.hash" sur une chaîne vide ne parviennent pas à supprimer le symbole de hachage lui-même.

Solution : API d'historique HTML5

Les navigateurs modernes fournissent une solution via l'API HTML5 History. En utilisant la fonction "history.pushState()", nous pouvons modifier la barre d'emplacement pour afficher une nouvelle URL sans déclencher une actualisation de la page.

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

Cette méthode supprime efficacement le hachage de l'URL dans les versions actuelles et navigateurs compatibles, notamment Chrome, Firefox, Safari, Opera et Internet Explorer 10 et versions ultérieures.

Dégradation gracieuse pour les navigateurs non pris en charge Navigateurs

Pour les navigateurs qui ne prennent pas en charge l'API History, vous pouvez utiliser un script de dégradation gracieux :

function removeHash() {
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Preserve current scroll position
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore scroll position
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

Cette approche garantit la compatibilité entre les différents navigateurs, en éliminant le symbole de hachage sans provoquant l'actualisation de la page.

Remarque :

• Pour remplacer l'actuel entrée d'historique au lieu d'en ajouter une nouvelle, utilisez "replaceState()" au lieu de "pushState()".
• La suppression du hachage dépend de la prise en charge du navigateur. Cependant, cette solution propose une approche complète qui couvre à la fois les navigateurs pris en charge et non pris en charge.

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!