Como você pode verificar se há uma #hash em uma URL usando JavaScript?

Question

Eu tenho algum código jQuery / JavaScript que eu quero correr apenas quando há um link de hash (#) âncora em uma URL. Como você pode verificar para este personagem usando JavaScript? Eu preciso de um simples catch-all teste que detecta URLs como estes:

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

Basicamente algo ao longo das linhas de:

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

Se alguém pudesse me aponte na direção certa, que seria muito apreciado.

Answer 1

Simples:

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

Coloque o seguinte:

<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

Se o URI não é a localização do documento esse trecho vai fazer o que quiser.

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

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

Answer 5

Você já tentou isso?

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

(Onde url é o URL que pretende verificar, obviamente.)

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

Isto irá resolver o problema;)

Answer 7

window.location.hash 

retornará o hash identificador

Answer 8

... ou há um seletor jQuery:

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

Answer 9

Aqui está o que você pode fazer para verificar periodicamente se há uma mudança de hash e, em seguida, chamar uma função para processar o valor 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);
}

Answer 10

A maioria das pessoas estão cientes das propriedades de URL em document.location. Isso é ótimo se você estiver interessado apenas na página atual. Mas a pergunta era sobre ser capaz de âncoras de análise em uma página não a própria página.

O que a maioria das pessoas parecem perder é que essas mesmas propriedades de URL também estão disponíveis para elementos de âncora:

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

Comentários

Partridge e Gareths acima são grandes. Eles merecem uma resposta em separado. Aparentemente, de hash e pesquisar propriedades estão disponíveis em qualquer objeto 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>

ou

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

Se você precisar isso em uma variável de seqüência regular e acontecer de ter jQuery ao redor, isso deve funcionar:

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

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

(mas a sua talvez um exagerado pouco ..)

Answer 13

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

Answer 14

Jogando isso aqui como um método para abstrair propriedades de localização de cordas arbitrária URI-like. Embora window.location instanceof Location é verdade, qualquer tentativa de Location invocação irá dizer-lhe que é uma empresa de construção ilegal. Você ainda pode obter a coisas como hash, query, protocol etc, definindo a seqüência de como a propriedade href de um elemento DOM âncora, que irá, em seguida, compartilhar todas as propriedades de endereço com window.location.

Maneira mais simples de fazer isto é:

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

string.hash;

Por conveniência, eu escrevi uma pequena biblioteca que utiliza esta opção para substituir o construtor nativo Location com um que vai levar cordas e produtos window.location-como objetos: Location.js

Answer 15

Normalmente cliques ir primeiro do que mudanças de local, então depois de um clique é uma boa idéia para setTimeOut para ficar atualizado window.location.hash

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

ou você pode ouvir local com:

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

Eu escrevi um plugin jQuery que faz algo parecido o que você quer fazer.

É um router âncora simples.

Answer 16

Aqui é uma função simples que retorna true ou false (tem / não tem um 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
}

Retorna true neste caso.

Com base @ comentário de jon-skeet.

Answer 17

Esta é uma maneira simples de testar isso para o URL da página atual:

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

Answer 18

Às vezes você começa a string de consulta completo, como "#anchorlink? Nome = marca"

este é o meu script para obter o valor de hash:

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

returns -> #anchorlink