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

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é.

Facile:

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

  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
  }

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>

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
}

Avez-vous essayé cela?

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

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

$('#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;)

window.location.hash 

renverra l'identifiant de hachage

... ou il y a un sélecteur jquery:

$('a[href^="#"]')

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

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

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

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

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é ..)

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

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.

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.

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

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

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