Recupera il valore del tag hash specifico dall'URL

Question

In raw Javascript, come si può verificare che un tag hash specifico esista in un URL, quindi acquisire il valore?

Esempio: http://www.example.com/index.html#hashtag1=value1&#hashtag2=value2

voglio essere in grado di afferrare il valore di entrambi hashtag1 o hashtag2.

Answer 1

var HashSearch = new function() { 
     var params; 

     this.set = function (key, value) { 
      params[key] = value; 
      this.push(); 
     }; 

     this.remove = function (key, value) { 
      delete params[key]; 
      this.push(); 
     }; 


     this.get = function (key, value) { 
      return params[key]; 
     }; 

     this.keyExists = function (key) { 
      return params.hasOwnProperty(key); 
     }; 

     this.push= function() { 
      var hashBuilder = [], key, value; 

      for(key in params) if (params.hasOwnProperty(key)) { 
       key = escape(key), value = escape(params[key]); // escape(undefined) == "undefined" 
       hashBuilder.push(key + ((value !== "undefined") ? '=' + value : "")); 
      } 

      window.location.hash = hashBuilder.join("&"); 
     }; 

     (this.load = function() { 
      params = {} 
      var hashStr = window.location.hash, hashArray, keyVal 
      hashStr = hashStr.substring(1, hashStr.length); 
      hashArray = hashStr.split('&'); 

      for(var i = 0; i < hashArray.length; i++) { 
       keyVal = hashArray[i].split('='); 
       params[unescape(keyVal[0])] = (typeof keyVal[1] != "undefined") ? unescape(keyVal[1]) : keyVal[1]; 
      } 
     })(); 
    } 

Usandolo:

Controllare se una "chiave hash" è presente:

HashSearch.keyExists("thekey"); 

Ottenere il valore per una chiave hash:

HashSearch.get('thekey'); 

Impostare la valore per una chiave hash e aggiorna l'hash dell'URL:

HashSearch.set('thekey', 'hey'); 

rimuovere una chiave hash dall'URL:

HashSearch.remove('thekey'); 

Ricarica l'hash in oggetto locale:

HashSearch.load(); 

Spingere il valore della chiave corrente impostato per l'hash URL:

HashSearch.push(); 

Si noti che quando una chiave non esiste e si prova a get, restituirà undefined. Tuttavia, potrebbe esistere una chiave senza valore, ad esempio #key=val&novalue, dove novalue è una chiave senza valore. Se lo fai, HashSearch.get("novalue") restituirà anche undefined. In tal caso, è necessario utilizzare per verificare che si tratti effettivamente di una chiave.

Answer 2

window.location.hash dovrebbe darti quello che vuoi.

Answer 3

Io uso questo, e funziona bene per me. È un po 'aggettivo per una linea che ho raccolto da qualche parte, credo in SO.

getURLHashParameter : function(name) { 

     return decodeURI(
      (RegExp('[#|&]' + name + '=' + '(.+?)(&|$)').exec(location.hash)||[,null])[1] 
     ); 
    }, 

Answer 4

jQuery BBQ (pulsante Indietro e query) sfrutta l'evento hashchange HTML5 per consentire semplice, ma potente storia #hash bookmarkable. Inoltre, jQuery BBQ fornisce un metodo .deparam() completo, insieme alla gestione dello stato hash e ai metodi di analisi delle stringhe di frammentazione/query parsing e merge.

In breve: questa libreria consente di modificare dinamicamente una "stringa di query" hash all'interno della pagina e di avere l'URL corrispondente. Permette anche di tirare dinamicamente i valori e normalizza il lavoro con la "stringa di query". Infine aggiungerà le stringhe della query nella cronologia, che consente al pulsante Indietro di funzionare come una navigazione tra i precedenti valori hash della query.

una buona mossa per UX sarebbe quello di controllare una libreria come jQuery barbecue :)