¿Cómo puedes verificar un #hash en una URL usando JavaScript?

Question

Tengo un código jQuery / JavaScript que quiero ejecutar solo cuando hay un enlace de anclaje hash ( # ) en una URL. ¿Cómo puedes verificar este personaje usando JavaScript? Necesito una prueba general que detecte URL como estas:

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

Básicamente algo en la línea de:

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

Si alguien pudiera señalarme en la dirección correcta, eso sería muy apreciado.

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

Ponga lo siguiente:

<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 el URI no es la ubicación del documento, este fragmento hará lo que desee.

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

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

Answer 5

¿Has probado esto?

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

(donde url es la URL que desea 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!
});

Esto resolverá el problema;)

Answer 7

window.location.hash 

devolverá el identificador hash

Answer 8

... o hay un selector de jquery:

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

Answer 9

Esto es lo que puede hacer para verificar periódicamente un cambio de hash y luego llamar a una función para procesar el valor de 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

La mayoría de las personas conocen las propiedades de URL en document.location. Eso es genial si solo estás interesado en la página actual. Pero la pregunta era sobre poder analizar anclas en una página, no en la página en sí.

Lo que la mayoría de las personas parecen perderse es que esas mismas propiedades de URL también están disponibles para anclar 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
   }
});

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

Los comentarios de Perdiz y Gareth anteriores son geniales. Se merecen una respuesta por separado. Aparentemente, las propiedades de hash y búsqueda están disponibles en cualquier objeto de enlace 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>

O

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

Si necesita esto en una variable de cadena normal y tiene jQuery, esto debería funcionar:

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

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

(pero quizás está un poco exagerado ...)

Answer 13

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

Answer 14

Lanzar esto aquí como un método para abstraer propiedades de ubicación de cadenas arbitrarias similares a URI. Aunque window.location instanceof Location es verdadero, cualquier intento de invocar Location le dirá que es un constructor ilegal. Todavía puede acceder a cosas como hash , query , protocol etc. estableciendo su cadena como la propiedad href de un elemento de anclaje DOM, que luego compartirá todas las propiedades de dirección con window.location .

La forma más simple de hacer esto es:

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

string.hash;

Por conveniencia, escribí una pequeña biblioteca que utiliza esto para reemplazar el constructor Location nativo con uno que tomará cadenas y producirá objetos similares a window.location : < a href = "https://gist.github.com/barneycarroll/5310151" rel = "nofollow"> Location.js

Answer 15

Por lo general, los clics van primero que los cambios de ubicación, así que después de un clic es una buena idea configurar TimeTout para actualizar window.location.hash

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

o puede escuchar la ubicación con:

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

Escribí un jQuery plugin que hace algo como lo que quieres hacer.

Es un enrutador de anclaje simple.

Answer 16

Aquí hay una función simple que devuelve true o false (tiene / no tiene 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
}

Devuelve true en este caso.

Basado en el comentario de @ jon-skeet.

Answer 17

Esta es una manera simple de probar esto para la URL de la página actual:

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

Answer 18

a veces se obtiene la cadena de consulta completa como " #anchorlink? firstname = mark & ??quot;

este es mi script para obtener el valor hash:

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

returns -> #anchorlink