web-dev-qa-db-fra.com

Comment supprimer le hachage de window.location (URL) avec JavaScript sans rafraîchissement de la page?

J'ai l'URL du type: http://example.com#something, comment puis-je supprimer #something, sans provoquer l'actualisation de la page?

J'ai tenté la solution suivante:

window.location.hash = '';

Cependant, cela ne supprime pas le symbole de hachage # de l'URL.

javascriptwindow.locationfragment-identifier
302
Tom Lehman

Question initiale: 

window.location.href.substr(0, window.location.href.indexOf('#'))

ou

window.location.href.split('#')[0]

les deux renverront l'URL sans le hachage ou quoi que ce soit après.

En ce qui concerne votre modification:

Toute modification de window.location déclenchera un rafraîchissement de la page. Vous pouvez changer window.location.hash sans déclencher l'actualisation (bien que la fenêtre saute si votre hachage correspond à un identifiant sur la page), mais vous ne pouvez pas vous débarrasser du signe dièse. Faites votre choix pour ce qui est pire ...

RÉPONSE PLUS ACTUELLE

La bonne réponse sur la façon de le faire sans sacrifier (rechargement complet ou laisser le signe de hachage là-bas) est ici-bas . Laissant cette réponse ici cependant, s'agissant d'être la réponse originale en 2009 alors que la réponse correcte, qui exploite les nouvelles API de navigateur, a été donnée un an et demi plus tard.

191
Gabriel Hurley

La résolution de ce problème est beaucoup plus à la portée de nos jours. = HTML5 History API nous permet de manipuler la barre d’emplacement pour afficher n’importe quelle URL du domaine actuel.

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

Démo de travail: http://jsfiddle.net/AndyE/ycmPt/show/

Cela fonctionne dans Chrome 9, Firefox 4, Safari 5, Opera 11.50 et dans IE 10. Pour les navigateurs non pris en charge, vous pouvez toujours écrire un script dégradant gracieusement qui en fait usage lorsqu'il est disponible:

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;
    }
}

Ainsi, vous pouvez vous débarrasser du symbole de hachage, mais pas dans tous les navigateurs.

Remarque: si vous souhaitez remplacer la page actuelle dans l'historique du navigateur, utilisez replaceState() au lieu de pushState().

545
Andy E

(Trop de réponses sont redondantes et obsolètes.) La meilleure solution est la suivante:

history.replaceState(null, null, ' ');
61
Pacerier

Simple et élégant:

history.replaceState({}, document.title, ".");  // replace / with . to keep url
39
cprcrack

Pour supprimer le hachage, vous pouvez essayer d’utiliser cette fonction

function remove_hash_from_url()
{
    var uri = window.location.toString();
    if (uri.indexOf("#") > 0) {
        var clean_uri = uri.substring(0, uri.indexOf("#"));
        window.history.replaceState({}, document.title, clean_uri);
    }
}
15
Rahul Gupta

Cela supprimera également le hachage de fuite. par exemple: http://test.com/123#abc -> http://test.com/12

if(window.history.pushState) {
    window.history.pushState('', '/', window.location.pathname)
} else {
    window.location.hash = '';
}
12
Chris Gunawardena

Que diriez-vous de ce qui suit?

window.location.hash=' '

Veuillez noter que je mets le hachage sur un seul espace et non sur une chaîne vide.

Définir le hachage sur un ancre non valide ne provoque pas d'actualisation non plus. Tel que,

window.location.hash='invalidtag'

Mais je trouve la solution ci-dessus trompeuse. Cela semble indiquer qu'il y a une ancre sur la position donnée avec le nom donné bien qu'il n'y en ait pas. Dans le même temps, l'utilisation d'une chaîne vide entraîne le déplacement de la page vers le haut, ce qui peut parfois être inacceptable. L'utilisation d'un espace garantit également que, chaque fois que l'URL est copiée, signetée et visitée à nouveau, la page se trouve généralement en haut de la page et l'espace est ignoré.

Et, hé, voici ma première réponse sur StackOverflow. J'espère que quelqu'un le trouvera utile et que cela correspond aux normes de la communauté.

5
Nibras Reeza
const url = new URL(window.location);
url.hash = '';
history.replaceState(null, document.title, url);
5
Casey

Vous pouvez le faire comme ci-dessous:

history.replaceState({}, document.title, window.location.href.split('#')[0]);

4
METALHEAD
<script type="text/javascript">
var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
    var clean_uri = uri.substring(0, uri.indexOf("?"));
    window.history.replaceState({}, document.title, clean_uri);
}
</script>

mettre ce code sur la tête

3
Manigandan Raamanathan

Essayez ce qui suit:

window.history.back(1);
1
Vishal Sharma
  $(window).on('hashchange', function (e) {
        history.replaceState("", document.title, e.originalEvent.oldURL);
    });
0
JohnMathew

Voici une autre solution pour modifier l'emplacement à l'aide de href et effacer le hachage sans défilement.

La solution magique est expliquée ici . Spécifications ici .

const hash = window.location.hash;
history.scrollRestoration = 'manual';
window.location.href = hash;    
history.pushState('', document.title, window.location.pathname);

REMARQUE: L'API proposée fait maintenant partie de WhatWG HTML Living Standard

0
voscausa