Comment pouvez-vous rechercher un #hash dans une URL en utilisant JavaScript?


783

J'ai du code jQuery / JavaScript que je veux exécuter uniquement lorsqu'il y a un #lien d'ancrage hash ( ) dans une URL. Comment pouvez-vous vérifier ce personnage en utilisant JavaScript? J'ai besoin d'un simple test fourre-tout qui détecterait des URL comme celles-ci:

  • example.com/page.html#anchor
  • example.com/page.html#anotheranchor

Fondamentalement, quelque chose comme:

if (thereIsAHashInTheUrl) {        
    do this;
} else {
    do this;
}

Si quelqu'un pouvait m'orienter dans la bonne direction, ce serait très apprécié.

Réponses:


1406

Facile:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}

43
Supplémentaire: l'objet .location n'est disponible que sur l'URL de la fenêtre actuelle, vous ne pouvez pas le faire pour une URL arbitraire (par exemple, une stockée dans une variable de chaîne)
Gareth

64
En outre, les propriétés de localisation telles que .hash et .query sont également disponibles sur les éléments <a>
Gareth

19
.searchest disponible sur un <a>, non .query. JQuery Exemple: $("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0]. .hash => "#fragmenttest"et .search= ?qs=1. À partir de là, appuyez sur la question d'extraction de la chaîne de requête pour obtenir autre chose qu'une chaîne.
patridge

1
@hitautodestruct: cette question ne concerne pas les modifications du hachage, juste si l'une est présente au chargement de la page ou non.
Gareth

2
@Gareth Oui, tu as raison. Je viens de réaliser que le lien que j'ai publié était pour l' hashchangeévénement et non window.location.hash. Bien que ce dernier ne soit pas supporté par IE <8.
hitautodestruct

335
  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
  } else {
      // No hash found
  }

54

Mettez ce qui suit:

<script type="text/javascript">
    if (location.href.indexOf("#") != -1) {
        // Your code in here accessing the string like this
        // location.href.substr(location.href.indexOf("#"))
    }
</script>

1
Merci, window.location.hash n'a de valeur que s'il y a une valeur après le #. par exemple. //www.example.com# renvoie '' lors de la vérification du hachage.
Jessy

33

Si l'URI n'est pas l'emplacement du document, cet extrait fera ce que vous voulez.

var url = 'example.com/page.html#anchor',
    hash = url.split('#')[1];

if (hash) {
    alert(hash)
} else {
    // do something else
}

+1 pour Javascript ne sachant pas ce qui est hors limites :)
Dunc

2
@Dunc: Eh bien, les tableaux JS sont essentiellement des objets. L' accès par les index est comme l' accès à une propriété d'objet comme ceci: obj['0']. Dans JS, cela est vrai: par arr[0] === arr['0']conséquent, si l'index / la clé n'existe pas, la valeur renvoyée n'est pas définie au lieu d'être hors limites. jsfiddle.net/web5me/Mw376
Marc Diethelm

21

Avez-vous essayé cela?

if (url.indexOf('#') !== -1) {
    // Url contains a #
}

(Où urlest l'URL que vous souhaitez vérifier, évidemment.)


17
$('#myanchor').click(function(){
    window.location.hash = "myanchor"; //set hash
    return false; //disables browser anchor jump behavior
});
$(window).bind('hashchange', function () { //detect hash change
    var hash = window.location.hash.slice(1); //hash to string (= "myanchor")
    //do sth here, hell yeah!
});

Cela résoudra le problème;)


J'ai bien aimé cette réponse coz de mélange JS + JQ, cross-browser et solution simple, déjà implémenté cette approche.
Arthur Kushman



6

Voici ce que vous pouvez faire pour vérifier périodiquement un changement de hachage, puis appeler une fonction pour traiter la valeur de hachage.

var hash = false; 
checkHash();

function checkHash(){ 
    if(window.location.hash != hash) { 
        hash = window.location.hash; 
        processHash(hash); 
    } t=setTimeout("checkHash()",400); 
}

function processHash(hash){
    alert(hash);
}

11
c'est seulement nessesary dans ie 6 + 7. Tous les autres navigateurs ont inclus l'événement
onhashchange

@Tokimon - génial! Je ne le savais pas. Mais je suppose que nous devons encore prendre en charge ces anciennes versions d'IE
Emmanuel

1
Oui, malheureusement ... Même IE 8 ne disparaîtra pas bientôt car IE 9 n'est pas pris en charge sur XP :(
Tokimon

1
modernizr.com implémente l'événement hashchange sur les anciens navigateurs (avec un tas d'autres fonctionnalités modernes)
guigouz

4
Ce n'est pas un code recommandé à tous: il devrait au moins être: setTimeout(checkHash, 400). De plus, les navigateurs modernes ont l' hashchangeévénement afin que vous puissiez faire un window.addEventListener('hashchange', function(){ … }). Enfin, la fuite de la hashvariable globale est une autre pratique non recommandée, même pour un exemple.
Oncle Tom

5

La plupart des gens connaissent les propriétés de l'URL dans document.location. C'est génial si vous êtes uniquement intéressé par la page actuelle. Mais la question était de pouvoir analyser les ancres sur une page et non la page elle-même.

Ce que la plupart des gens semblent manquer, c'est que ces mêmes propriétés d'URL sont également disponibles pour ancrer les éléments:

// To process anchors on click    
jQuery('a').click(function () {
   if (this.hash) {
      // Clicked anchor has a hash
   } else {
      // Clicked anchor does not have a hash
   }
});

// To process anchors without waiting for an event
jQuery('a').each(function () {
   if (this.hash) {
      // Current anchor has a hash
   } else {
      // Current anchor does not have a hash
   }
});

5
function getHash() {
  if (window.location.hash) {
    var hash = window.location.hash.substring(1);

    if (hash.length === 0) { 
      return false;
    } else { 
      return hash; 
    }
  } else { 
    return false; 
  }
}

3
Ne devrait-il pas s'agir de "hachage.longueur" par opposition à "hachage.longueur ()"? :)
Nathan Pitman

4
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);

3

Les commentaires de Partridge et Gareths ci-dessus sont excellents. Ils méritent une réponse distincte. Apparemment, les propriétés de hachage et de recherche sont disponibles sur n'importe quel objet Link html:

<a id="test" href="foo.html?bar#quz">test</a>
<script type="text/javascript">
   alert(document.getElementById('test').search); //bar
   alert(document.getElementById('test').hash); //quz
</script>

Ou

<a href="bar.html?foo" onclick="alert(this.search)">SAY FOO</a>

Si vous en avez besoin sur une variable de chaîne régulière et que jQuery est présent, cela devrait fonctionner:

var mylink = "foo.html?bar#quz";

if ($('<a href="'+mylink+'">').get(0).search=='bar')) {
    // do stuff
}

(mais c'est peut-être un peu exagéré ..)


3

Lancer ceci ici comme méthode pour extraire les propriétés d'emplacement à partir de chaînes arbitraires de type URI. Bien que cela window.location instanceof Locationsoit vrai, toute tentative d'invocation Locationvous dira que c'est un constructeur illégal. Vous pouvez toujours obtenir à des choses comme hash, query, protocoletc en réglant votre chaîne comme la hrefpropriété d'un élément d'ancrage DOM, qui partagera ensuite toutes les propriétés d'adresse avec window.location.

La façon la plus simple de procéder est:

var a = document.createElement('a');
a.href = string;

string.hash;

Pour plus de commodité, j'ai écrit une petite bibliothèque qui l'utilise pour remplacer le Locationconstructeur natif par un autre qui prendra des chaînes et produira des window.locationobjets similaires: Location.js


1

Habituellement, les clics passent d'abord aux changements d'emplacement, donc après un clic est une bonne idée de définir TimeOut pour obtenir la mise à jour de window.location.hash

$(".nav").click(function(){
    setTimeout(function(){
        updatedHash = location.hash
    },100);
});

ou vous pouvez écouter l'emplacement avec:

window.onhashchange = function(evt){
   updatedHash = "#" + evt.newURL.split("#")[1]
};

J'ai écrit un plugin jQuery qui fait quelque chose comme ce que vous voulez faire.

C'est un simple routeur d'ancrage.


1

Voici une fonction simple qui retourne trueou false(a / n'a pas de hashtag):

var urlToCheck = 'http://www.domain.com/#hashtag';

function hasHashtag(url) {
    return (url.indexOf("#") != -1) ? true : false;
}

// Condition
if(hasHashtag(urlToCheck)) {
    // Do something if has
}
else {
    // Do something if doesn't
}

Renvoie truedans ce cas.

Basé sur le commentaire de @ jon-skeet.


0

Voici un moyen simple de tester cela pour l'URL de la page actuelle:

  function checkHash(){
      return (location.hash ? true : false);
  }

-2

parfois, vous obtenez la chaîne de requête complète telle que "#anchorlink? firstname = mark"

voici mon script pour obtenir la valeur de hachage:

var hashId = window.location.hash;
hashId = hashId.match(/#[^?&\/]*/g);

returns -> #anchorlink

6
Impossible car le hachage est ajouté après la chaîne de requête et n'est jamais envoyé au serveur. Le seul hachage de temps apparaîtrait avant la chaîne de requête, c'est lorsque vous avez modifié l'URL à la main.

1
oui, mais parfois les gens envoient des URL sur ce format. c'est juste pour que vous puissiez obtenir uniquement la valeur de hachage et négliger les autres. :)
markg
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.