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

Question

J'ai du code jQuery / JavaScript que je veux exécuter uniquement lorsqu'il existe un lien d'ancrage dièse ( # ) dans une URL. Comment pouvez-vous vérifier ce caractère en utilisant JavaScript? J'ai besoin d'un simple test fourre-tout permettant de détecter les URL de ce type:

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

En gros, quelque chose comme:

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

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

Answer 1

Simple:

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

Answer 2

  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
  }

Answer 3

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>

Answer 4

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

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

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

Answer 5

Avez-vous essayé cela?

if (url.indexOf("#") != -1)
{
}

(Où url est évidemment l'URL que vous souhaitez vérifier.)

Answer 6

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

Answer 7

window.location.hash 

renverra l'identifiant de hachage

Answer 8

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

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

Answer 9

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

Answer 10

La plupart des gens connaissent les propriétés de l'URL dans document.location. C'est très bien si vous êtes uniquement intéressé par la page actuelle. Mais la question portait sur la possibilité d’analyser les ancres sur une page et non sur la page elle-même.

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

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

Answer 11

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

Answer 12

Les commentaires de Partridge et Gareths ci-dessus sont excellents. Ils méritent une réponse séparée. Apparemment, les propriétés de hachage et de recherche sont disponibles sur tout objet Lien 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 avec une variable de chaîne normale 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é ..)

Answer 13

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

Answer 14

Cela est indiqué ici comme méthode d'abstraction des propriétés d'emplacement à partir de chaînes arbitraires de type URI. Bien que window.location instanceof Location soit à true, toute tentative d'invocation de Location vous indiquera qu'il s'agit d'un constructeur illégal. Vous pouvez toujours accéder à des éléments tels que hash , requête , protocole , etc. en définissant votre chaîne comme propriété href de 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 la suivante:

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

string.hash;

Par souci de commodité, j’ai écrit une petite bibliothèque qui l’utilise pour remplacer le constructeur natif Location par un constructeur qui prendra des chaînes et produira des objets window.location : < a href = "https://gist.github.com/barneycarroll/5310151" rel = "nofollow"> Emplacement.js

Answer 15

Habituellement, les clics vont en premier lieu que les changements d'emplacement, alors, après un clic, c'est une bonne idée de définir timetime obtenir une mise à jour de window.location.hash

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

ou vous pouvez écouter la position avec:

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

J'ai écrit un plug-in jQuery qui fait quelque chose comme: ce que vous voulez faire.

C'est un simple routeur d'ancrage.

Answer 16

Voici une fonction simple qui renvoie true ou 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 true dans ce cas.

Basé sur le commentaire de @ jon-skeet.

Answer 17

C’est un moyen simple de le tester pour l’URL de la page actuelle:

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

Answer 18

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