Come puoi verificare la presenza di un #hash in un URL usando JavaScript?

Ho del codice jQuery / JavaScript che voglio eseguire solo quando c'è un #collegamento di ancoraggio hash ( ) in un URL. Come puoi verificare questo personaggio usando JavaScript? Ho bisogno di un semplice test generale che rilevi URL come questi:

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

Fondamentalmente qualcosa sulla falsariga di:

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

Se qualcuno potesse indicarmi la giusta direzione, sarebbe molto apprezzato.

Semplice:

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
  }

Metti il ​​seguente:

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

Se l'URI non è la posizione del documento, questo frammento farà ciò che desideri.

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

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

Hai provato questo?

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

(Dov'è urll'URL che vuoi controllare, ovviamente.)

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

Questo risolverà il problema;)

window.location.hash 

restituirà l'identificatore hash

... o c'è un selettore jquery:

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

Ecco cosa puoi fare per controllare periodicamente la presenza di un cambiamento di hash, quindi chiamare una funzione per elaborare il valore di hash.

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

Molte persone sono a conoscenza delle proprietà dell'URL in document.location. È fantastico se sei interessato solo alla pagina corrente. Ma la domanda era di poter analizzare le ancore su una pagina e non sulla pagina stessa.

Ciò che la maggior parte delle persone sembra perdere è che quelle stesse proprietà URL siano disponibili anche per ancorare elementi:

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

I commenti di Partridge e Gareths sopra sono fantastici. Meritano una risposta separata. Apparentemente, le proprietà di hash e ricerca sono disponibili su qualsiasi oggetto html Link:

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

O

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

Se hai bisogno di questo su una normale variabile stringa e hai jQuery in giro, dovrebbe funzionare:

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

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

(ma forse è un po 'esagerato ..)

Inserendolo qui come metodo per astrarre le proprietà della posizione da stringhe arbitrarie simili a URI. Sebbene window.location instanceof Locationsia vero, qualsiasi tentativo di invocazione Locationti dirà che è un costruttore illegale. È ancora possibile ottenere a cose come hash, query, protocolecc impostando la stringa come hrefproprietà di un elemento DOM di ancoraggio, che sarà poi condividere tutte le proprietà l'indirizzo con window.location.

Il modo più semplice per farlo è:

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

string.hash;

Per comodità, ho scritto una piccola libreria che lo utilizza per sostituire il Locationcostruttore nativo con uno che prenderà stringhe e produrrà window.locationoggetti simili: Location.js

Di solito i clic vanno prima delle modifiche alla posizione, quindi dopo un clic è una buona idea impostareTimeOut per ottenere window.location.hash aggiornato

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

oppure puoi ascoltare la posizione con:

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

Ho scritto un plugin jQuery che fa qualcosa di simile a quello che vuoi fare.

È un semplice router di ancoraggio.

Ecco una semplice funzione che ritorna trueo false(ha / non ha un 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
}

ritorna true in questo caso.

Basato sul commento di @ jon-skeet.

Questo è un modo semplice per testarlo per l'URL della pagina corrente:

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

a volte ottieni la stringa di query completa come "#anchorlink? firstname = mark"

questo è il mio script per ottenere il valore hash:

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

returns -> #anchorlink