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

window location hash ''# tries '';

Question

Tengo algún código jQuery JavaScript que deseo ejecutar solo cuando hay un enlace de ancla hash (#) en una URL. ¿Cómo puedes verificar este personaje usando JavaScript? Necesito una prueba sencilla que permita detectar URL como esta:

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

Básicamente algo a lo largo de las líneas de:

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

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

Answer 1

¿Has probado esto?

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

(Donde url es la URL que quieres verificar, obviamente.)

Answer 2

... o hay un selector de jQuery:

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

Answer 3

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 4

Esta es una forma sencilla de probar esto para la URL de la página actual:

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

Answer 5

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 6

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

Lo que la mayoría de la gente parece pasar por alto es que esas mismas propiedades de URL también están disponibles para elementos de anclaje:

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

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

La forma más sencilla de hacer esto es:

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

string.hash;

Para mayor comodidad, escribí una pequeña biblioteca que utiliza esto para reemplazar el constructor nativo de Location con uno que tomará cadenas y producirá objetos similares a window.location : Location.js

Answer 8

Perdiz y los comentarios de Gareth anteriores son excelentes. Ellos merecen una respuesta por separado. Aparentemente, las propiedades de hash y de 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 tal vez es un poco exagerado ..)

Answer 9

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 10

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

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

o puedes escuchar la ubicación con:

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

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

Es un enrutador de anclaje simple.

Answer 11

Sencillo:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn''t exist
}

Answer 12

Si el URI no es la ubicación del documento, este fragmento hará lo que usted desea.

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

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

Answer 13

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

este es mi script para obtener el valor de hash:

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

returns -> #anchorlink

Answer 14

  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 15

$(''#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 solucionará el problema ;)

Answer 16

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 17

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

Answer 18

window.location.hash 

devolverá el identificador de hash