Comment supprimer le hachage de window.location (URL) avec JavaScript sans actualisation de page?


332

J'ai une URL comme:, http://example.com#somethingcomment supprimer #something, sans provoquer le rafraîchissement de la page?

J'ai tenté la solution suivante:

window.location.hash = '';

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


3
Voulez-vous vraiment faire ça? Cela provoquera un rafraîchissement de la page.
seth

9
Est-il possible de se passer d'une actualisation de page?
Tom Lehman

1
Il est possible. Les bibliothèques d'histoire AJAX s'en occupent. Mais ce n'est pas facile, et cela doit être fait différemment pour presque tous les navigateurs. Pas quelque chose dans lequel vous voulez vous lancer.
Gabriel Hurley

Y a-t-il des inconvénients à laisser un "#" derrière autre qu'un visuel?
user29660

Réponses:


211

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 montage:

Toute modification window.locationentraînera une actualisation de la page. Vous pouvez modifier window.location.hashsans 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 de hachage. Faites votre choix pour ce qui est pire ...

RÉPONSE LA PLUS ACTUELLE

La bonne réponse sur la façon de le faire sans sacrifier (soit un rechargement complet ou en laissant le signe de hachage là-bas) est ici . Laissant cette réponse ici par rapport à l'original en 2009 alors que la bonne qui utilise les nouvelles API de navigateur a été donnée 1,5 an plus tard.


22
C'est tout simplement faux, vous pouvez changer window.location.hash et cela ne déclenchera pas de rafraîchissement.
Evgeny

61
@Evgeny - C'est ce que dit ma réponse. Je dis explicitement que changer window.location.hash ne déclenchera pas de rafraîchissement. Msgstr "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)".
Gabriel Hurley

3
Pas de rechargement de page - c'est la question. Ce n'est pas la réponse car elle nécessite / force un rechargement de page!
Ed_

10
pense aussi que ça ne devrait pas être la ✓ réponse
abernier

4
Ce n'est pas une réponse à la question OP.
Bryce

586

De nos jours, résoudre ce problème est beaucoup plus à portée de main. L' API Historique HTML5 nous permet de manipuler la barre d'adresse pour afficher n'importe quelle URL dans le 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 l'utilise 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;
    }
}

Vous pouvez donc vous débarrasser du symbole de hachage, mais pas dans tous les navigateurs - pour le moment.

Remarque: si vous souhaitez remplacer la page actuelle dans l'historique du navigateur, utilisez replaceState()plutôt que pushState().


9
Utilisez cette ligne pour vous assurer de ne pas perdre la chaîne de requête: history.pushState ("", document.title, window.location.pathname + window.location.search);
Phil Kulak

6
@Phil: merci de l'avoir signalé, j'ai mis à jour la réponse en conséquence. J'ai trop l'habitude d'utiliser de jolies URL.
Andy E

1
Pour les anciennes versions d'IE, il semble que vous devez utiliser document.documentElement au lieu de document.body. Voir cette réponse stackoverflow.com/a/2717272/359048
jasonmcclurg

29
Je suggère d'utiliser replaceState au lieu de pushState, pour ne pas créer d'entrée supplémentaire dans l'historique du navigateur.
Nico

1
@santiagoarizti: vous avez raison, je suis juste arrivé à la même conclusion. Je n'ai pas inspecté correctement le code que j'ai écrit (il y a 7 ans!) Et j'ai raté que je basculais également l'état du bouton lors de la suppression du hachage. Puisque vous modifiez le hachage manuellement, vous pouvez toujours déclencher l'événement vous-même, je suppose.
Andy E

86

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

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

5
utilisez-le à la history.pushState(null, null, ' ')place si vous souhaitez conserver l'historique.
nichijou

9
Il pourrait être utile d'expliquer ce que le passage nullpour les paramètres stateet titlefinit par faire.
V. Rubinetti

Un problème avec cela, et le reste, est qu'il ne déclenche pas onhashchange, même si le hachage est maintenant vide alors qu'il ne l'était pas auparavant.
Curtis

1
Dans TypeScript, null n'est pas autorisé pour le deuxième paramètre car la commande prend une chaîne. Mozilla recommande une chaîne vide.
Curtis

41

Simple et élégant:

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

3
utilisez un point au lieu d'une barre oblique si vous souhaitez rester dans le même répertoire
vahanpwns

1
Veuillez mettre à jour la réponse en ce qui concerne la note @vahanpwns, à utiliser à la .place de /. L'utilisation /modifie l'URL du chemin racine.
Isaac Gregson

5
Merci pour cette réponse, je l'ai modifié history.replaceState({}, document.title, location.href.substr(0, location.href.length-location.hash.length));pour mon cas d'utilisation.
Scott Jungwirth du

5
Cela ne préserve pas la requête URL.
Vladislav Kostenko

2
Mon cas d'utilisation était également de remplacer au lieu de pousser, mais cela a plus de sens pour moi:history.replaceState(null, document.title, location.pathname + location.search);
MDMower

16

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

13

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

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

Cela supprime tous les paramètres de requête présents dans l'URL :(
kevgathuku

1
@kevgathuku vous pouvez les ajouter à nouveau avec location.search, par exemple: `window.history.pushState ('', '/', window.location.pathname + window.location.search)`
Chris Gunawardena

6

Et les choses suivantes?

window.location.hash=' '

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


La définition du hachage sur une ancre non valide ne provoque pas non plus d'actualisation. 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, mise en signet et visitée à nouveau, la page sera généralement en haut et l'espace sera ignoré.

Et, hé, c'est ma première réponse sur StackOverflow. J'espère que quelqu'un le trouve utile et qu'il correspond aux normes de la communauté.


7
Définir le hachage sur un espace blanc conserve toujours le # à la fin de l'URL, je pense que le but est de le supprimer complètement.
mahemoff

1
Il trace un hachage à la fin de l'URL. La question est de savoir comment supprimer cela.
Gurmeet Singh

Oui, comment pouvons-nous également supprimer # avec la chaîne de hachage.
Bhavin Thummar

6

Vous pouvez le faire comme ci-dessous:

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


1
La réponse étoilée n'a pas fonctionné pour moi dans les deux cas, mais celle-ci l'a fait. Merci!
Dev

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

2
Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant pourquoi et / ou comment ce code répond à la question améliore sa valeur à long terme.
rollstuhlfahrer le

3
<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 section tête


3
function removeLocationHash(){
    var noHashURL = window.location.href.replace(/#.*$/, '');
    window.history.replaceState('', document.title, noHashURL) 
}

window.addEventListener("load", function(){
    removeLocationHash();
});

2

Je pense que ce serait plus sûr

if (window.history) {
    window.history.pushState('', document.title, window.location.href.replace(window.location.hash, ''));
} else {
    window.location.hash = '';
}

0

Essayez ce qui suit:

window.history.back(1);

23
Cela ne répond pas à la question si l'utilisateur est venu directement à l'URL, y compris le hachage.
nickb

Cette astuce est très utile lorsque vous souhaitez simplement créer un lien vers la page précédente, mais le lien est caché dans un tas de fichiers js.
ValidfroM

Exactement ce que je cherchais. Cela fonctionne parfaitement pour supprimer un hashtag juste créé par mon application web afin de consommer une valeur retournée par une fonction javasript.
user278859

0

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

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
  $(window).on('hashchange', function (e) {
        history.replaceState("", document.title, e.originalEvent.oldURL);
    });

-1

Vous pouvez remplacer le hachage par null

var urlWithoutHash = document.location.href.replace(location.hash , "" );

1
La question demande «sans provoquer l'actualisation de la page», mais cette méthode actualise la page. Vous devriez noter ce fait dans votre réponse, afin que nous n'ayons pas tous à perdre notre temps à découvrir par vous-même que vous répondez à une question différente de celle à laquelle nous essayons réellement d'obtenir une réponse ici.
Vladimir Kornea

Il ne rafraîchit pas la page.
Ciprian
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.