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

783

Eu tenho algum código jQuery / JavaScript que quero executar apenas quando houver um #link de âncora hash ( ) em uma URL. Como você pode verificar esse personagem usando JavaScript? Eu preciso de um teste simples que detecte URLs como estes:

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

Basicamente, algo como:

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

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

Philip Morton
fonte

Respostas:

1406

Simples:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}
Gareth
fonte
42
Adicional: o objeto .location está disponível apenas no URL da janela atual; você não pode fazer isso para um URL arbitrário (por exemplo, um armazenado em uma variável de cadeia de caracteres)
Gareth
64
Além disso, propriedades de localização como .hash e .query também estão disponíveis nos elementos <a>
Gareth
19
.searchestá disponível em um <a>, não .query. JQuery amostra: $("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0]. .hash => "#fragmenttest"e .search= ?qs=1. A partir daí, acione a pergunta de extração da string de consulta para obter algo diferente de uma string.
patridge 29/07
1
@hitautodestruct: esta questão não trata de alterações no hash, apenas se uma está presente no carregamento da página ou não.
Gareth
2
@Gareth Sim, você está certo. Só percebi que o link que publiquei era para o hashchangeevento e não window.location.hash. Embora este último não seja suportado pelo IE <8.
hitautodestruct
334
  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
  }
Mark Notton
fonte
54

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>
José Leal
fonte
1
Obrigado, window.location.hash só tem um valor se houver um valor após o #. por exemplo. //www.example.com# retorna '' ao verificar o hash.
Jessy
33

Se o URI não for o local do documento, esse trecho fará o que você deseja.

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

if (hash) {
    alert(hash)
} else {
    // do something else
}
Marc Diethelm
fonte
+1 para Javascript não saber o que fora dos limites é :)
Dunc
2
@ Dunc: Bem, matrizes JS são basicamente objetos. Acessá-los por índice é como acessar um imóvel objeto da seguinte forma: obj['0']. Em JS, isso é verdade: arr[0] === arr['0']Portanto, se o índice / chave não existir, o valor retornado será indefinido em vez de fora dos limites. jsfiddle.net/web5me/Mw376
Marc Diethelm
21

Você já tentou isso?

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

(Onde urlestá o URL que você deseja verificar, obviamente).

Jon Skeet
fonte
17
$('#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 resolverá o problema ;)

Oral ÜNAL
fonte
Gostei desta resposta por misturar JS + JQ, entre navegadores e solução simples, já implementou essa abordagem.
Arthur Kushman
13
window.location.hash 

retornará o identificador de hash

user2327502
fonte
Curtas e limpas, é perfeito
Jam
10

... ou há um seletor de jquery:

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

Aqui está o que você pode fazer para verificar periodicamente uma alteração de hash e, em seguida, chamar uma função para processar o valor do 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);
}
Emmanuel
fonte
11
de que é somente nessesary no IE 6 + 7. Al outros navegadores têm incluído o evento onhashchange
Tokimon
@Tokimon - ótimo! Eu não sabia disso. Mas acho que ainda temos para apoiar essas versões antigas do IE
Emmanuel
1
Sim, infelizmente ... Mesmo IE 8 não vão embora assim que o IE 9 não é compatível com XP :(
Tokimon
1
modernizr.com implementa o evento hashchange em navegadores mais antigos (junto com um monte de outras características modernas)
guigouz
4
Este não é um código recomendada a todos: ela deve ser pelo menos: setTimeout(checkHash, 400). Além disso, navegadores modernos têm o hashchangeevento para que você possa fazer um window.addEventListener('hashchange', function(){ … }). Finalmente, vazar a hashvariável global é outra prática não recomendada, mesmo que seja um exemplo.
Oncle Tom
5

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

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

// 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
   }
});
Nicholas Davison
fonte
5
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; 
  }
}
user2465270
fonte
3
Isso não deve ser "hash.length" em oposição a "hash.length ()"? :)
Nathan Pitman
4
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);
Graham
fonte
3

Os comentários de Partridge e Gareths acima são ótimos. Eles merecem uma resposta separada. Aparentemente, as propriedades hash e de pesquisa estão disponíveis em qualquer objeto 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>

Se você precisar disso em uma variável de cadeia regular e tiver jQuery, isso deve funcionar:

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

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

(mas talvez seja um pouco exagerado ..)

commonpike
fonte
3

Lançando isso aqui como um método para abstrair propriedades de localização de seqüências arbitrárias semelhantes a URI. Embora window.location instanceof Locationseja verdade, qualquer tentativa de invocação Locationinformará que é um construtor ilegal. Você ainda pode obter a coisas como hash, query, protocoletc, definindo a seqüência de como a hrefpropriedade de um elemento DOM âncora, que irá, em seguida, compartilhar todas as propriedades do endereço com window.location.

A maneira mais simples de fazer isso é:

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

string.hash;

Por conveniência, escrevi uma pequena biblioteca que utiliza isso para substituir o Locationconstrutor nativo por outro que pega seqüências de caracteres e produz window.locationobjetos semelhantes: Location.js

Barney
fonte
1

Normalmente, os cliques são os primeiros a mudar as localizações; portanto, depois de um clique, é uma boa ideia definir setTimeOut para atualizar window.location.hash

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

ou você pode ouvir a localização com:

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

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

É um roteador de âncora simples.

Rolando
fonte
1

Aqui está uma função simples que retorna trueou false(possui / não possui uma 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 trueneste caso.

Com base no comentário de @ jon-skeet.

dnns
fonte
0

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

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

às vezes, você obtém a string de consulta completa, como "#anchorlink? firstname = mark"

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

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

returns -> #anchorlink
markg
fonte
6
Não é possível, pois o hash é anexado após a string de consulta e nunca é enviado ao servidor. O único hash de tempo que apareceria antes da string de consulta é quando você modificava o URL manualmente.
1
sim, mas às vezes as pessoas enviam URLs nesse formato. isso é apenas para que você possa obter apenas o valor do hash e negligenciar os outros. :)
markg 27/07