¿Cómo se puede comprobar un #hash en una URL con JavaScript?

Tengo algunas jQuery/JavaScript de código que quiero que se ejecute solo cuando hay un hash (#) vínculo de anclaje en una dirección URL. ¿Cómo se puede comprobar este personaje el uso de JavaScript? Necesito un simple catch-all de la prueba que pueda detectar URLs como estas:

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

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

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

Si alguien pudiera me apunte en la dirección correcta, que sería muy apreciada.

18 Kommentare

  1. 1355

    Simple:

    if(window.location.hash) {
      //Fragment exists
    } else {
      //Fragment doesn't exist
    }
    • Adicional: la .ubicación del objeto sólo está disponible en la ventana actual de la URL, usted no puede hacer esto para cualquier URL (por ejemplo, que se almacena en una variable de cadena)
    • También, la ubicación de las propiedades como .hash y .consulta también están disponibles en <a> elementos
    • .search está disponible en una <a>, no .query. Ejemplo de jQuery: $("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0]. .hash => "#fragmenttest" y .search = ?qs=1. Desde allí, golpear hasta el querystring extracción pregunta para obtener algo distinto de una cadena.
    • esta pregunta no es acerca de los cambios en el hash, sólo si uno está presente en la carga de la página o no.
    • Sí, tienes razón. Acabo de darme cuenta de que el enlace que he publicado fue para el hashchange evento y no window.location.hash. Aunque el último no es compatible con IE < 8.
    • ¿Y si el <a> enlaces a una dirección URL no válida con una extraña sintaxis?
    • Esto no funciona para mí direcciones Url que tiene el #anchor después de un extra de / (por ejemplo, example.com/page/#anchor). Esta es la forma en WordPress maneja hashes. En lugar de ello he utilizado una de las otras soluciones en esta página, que trabajó: location.href.indexOf("#") != -1. No he tenido oportunidad de probar esta, pero mi suposición es que el extra / antes de la #anchor es la razón por la solución con window.location.hash no funciona para mí. Sólo he probado este usando Chrome 47.
    • Una manera en que este puede ser utilizado es el de comprobar si el usuario está en la raíz del dominio. if(window.location.hash) { // Fragment exists } else { // Fragment doesn't exist console.log('Welcome to ROOT'); }
    • Si usted está comprobando que el hash es igual a un valor, a continuación, asegúrese de usar algo como if(window.location.hash == '#hashnamehere'). Yo estaba cometiendo el error de comprobación sin la física hash #.
    • Es la inyección de código un riesgo aquí? O javascript auto-mango de escapar de todo lo que en el hash

  2. 313
      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
      }
  3. 52

    Poner 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>
    • Gracias, ventana.ubicación.hash sólo tiene valor si hay un valor que sigue la #. por ejemplo. //www.example.com# devuelve » al comprobar el hash.
  4. 32

    Si el URI no es el documento en la ubicación de este fragmento hace lo que usted desea.

    var url = 'example.com/page.html#anchor',
        hash = url.split('#')[1];
    
    if (hash) {
        alert(hash)
    } else {
        //do something else
    }
    • +1 para Javascript no saber qué fuera de los límites es 🙂
    • Bien JS matrices son básicamente Objetos. Acceder a ellos mediante el índice es igual que el acceso a la propiedad de un Objeto así: obj['0']. En JS esto es cierto: arr[0] === arr['0'] por lo Tanto, si el índice o clave no existe el valor devuelto es indefinido en lugar de fuera de límites. jsfiddle.net/web5me/Mw376
  5. 19

    ¿Has probado esto?

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

    (Donde url es la dirección URL que desea comprobar, obviamente.)

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

    Que esto va a resolver el problema 😉

    • Gustó esta respuesta coz de la mezcla de JS+JQ, cross-browser y simple solución, ya que ha aplicado este enfoque.
  7. 6

    Aquí está lo que usted puede hacer para comprobar periódicamente si hay un cambio de hash, y, a continuación, 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);
    }
    • eso es sólo así lo requiriesen en ie 6 + 7. Al resto de navegadores han incluido el onhashchange evento
    • genial!!! Yo no sabía que. Pero supongo que aún tenemos para apoyar a las viejas versiones de IE
    • Sí, por desgracia… Incluso IE 8 no se vaya pronto como IE 9 no es compatible con XP 🙁
    • modernizr.com implementa el hashchange evento en navegadores antiguos (junto con un montón de otras características modernas)
    • No se recomienda esta línea de código: al menos debería ser: setTimeout(checkHash, 400). Además, los navegadores modernos tienen la hashchange evento, por lo que usted puede hacer un window.addEventListener('hashchange', function(){ … }). Finalmente, la filtración del mundial hash variable es otra no se recomienda la práctica, incluso para un ejemplo.
  8. 5

    La mayoría de las personas son conscientes de las propiedades de la dirección URL en el documento.ubicación. Que genial, si usted está interesado sólo en la página actual. Pero la pregunta era acerca de ser capaz de analizar los anclajes en una página que no es la propia página.

    Lo que la mayoría de la gente parece extraño es que esas mismas propiedades de URL también están disponibles para anclaje de 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
       }
    });
  9. 4
    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; 
      }
    }
    • En caso de que no se «hash.longitud» como opuesto a «hash.longitud()»? 🙂
  10. 3

    Perdiz y Gareths comentarios de arriba son grandes. Que aparte merecen respuesta.
    Al parecer, hachís y de búsqueda de propiedades están disponibles en cualquier Enlace html objeto:

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

    Debe usted necesita este en una cadena normal de la variable y pasar a tener jQuery alrededor,
    esto debería funcionar:

    var mylink = "foo.html?bar#quz";
    
    if ($('<a href="'+mylink+'">').get(0).search=='bar')) {
        //do stuff
    }

    (pero tal vez un poco exagerado .. )

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

    Tirar esto aquí como un método para la abstracción de las propiedades de la ubicación de arbitrario URI-como cadenas. Aunque window.location instanceof Location es cierto, cualquier intento de invocar Location le dirá que es un ilegal constructor. Usted todavía puede llegar a cosas como hash, query, protocol etc mediante el establecimiento de su cadena como el href propiedad de un DOM elemento delimitador, que luego comparten todas las propiedades de dirección con window.location.

    Forma más sencilla 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 nativo Location constructor con el que se llevará cadenas y producir window.location-al igual que los objetos: Location.js

  13. 1

    Generalmente clic en ir primero de los cambios de ubicación,
    así que después de un clic es una buena idea para setTimeOut
    para actualizar de la ventana.ubicación.hash

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

    o usted puede escuchar ubicación con:

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

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

    Es un simple anclaje router.

  14. 1

    Aquí es una simple función 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.

    Basa en @jon-skeet comentario.

  15. 0

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

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

    a veces se tiene la completa cadena de consulta, tales como «#anchorlink?firstname=marca»

    este es mi script para obtener el valor de hash:

    var hashId = window.location.hash;
    hashId = hashId.match(/#[^?&\/]*/g);
    
    returns -> #anchorlink
    • No es posible hash se anexa después de la cadena de consulta y nunca es enviado al servidor. La única vez hash aparecería antes de cadena de consulta es cuando se ha modificado la url a mano.
    • sí, pero a veces la gente enviar la url del sitio en este formato. este es tan sólo puede obtener el valor de hash y el abandono de los otros. 🙂

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea