web-dev-qa-db-fra.com

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

J'ai du code JavaScript jQuery que je veux exécuter uniquement lorsqu'un lien d'ancrage hash (#) est présent 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:

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

Fondamentalement, quelque chose dans les lignes de:

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

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

javascriptjqueryanchorfragment-identifier
710
Philip Morton

Simple:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}
1271
Gareth
  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
  }
288
Mark Notton

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>
48
José Leal

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
}
27
Marc Diethelm

Avez-vous essayé cela?

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

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

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

15
Oral ÜNAL
window.location.hash

retournera l'identifiant de hachage

12
user2327502

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

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

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

La plupart des gens connaissent les propriétés de l'URL dans document.location. C'est très bien si vous êtes seulement 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.

La plupart des gens semblent oublier 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
   }
});
5
Nicholas Davison
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; 
  }
}
4
user2465270
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);
3
Graham

En jetant cela 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 vrai, toute tentative d'appel de Location vous dira qu'il s'agit d'un constructeur illégal. Vous pouvez toujours accéder à des éléments tels que hash, query, protocol etc. en définissant votre chaîne comme propriété href d'un élément d'ancrage DOM, qui partagera ensuite toutes les propriétés d'adresse avec window.location.

Le moyen le plus simple de le faire 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 constructeur natif Location par un constructeur qui prendra des chaînes et produira des objets de type window.location-: Location.js

3
Barney

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 avez besoin de cela avec une variable de chaîne normale et que jQuery soit présent, ceci 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
commonpike

En général, les clics vont en premier lieu que les changements d'emplacement, Donc après un clic, c'est une bonne idée de définir setTimeOutto pour obtenir une mise à jour de window.location.hash.

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

ou vous pouvez écouter le lieu 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
Rolando

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
}

Retourne true dans ce cas.

Basé sur le commentaire de @ jon-skeet.

0
dnns

C'est un moyen simple de tester cela pour l'URL de la page en cours:

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