web-dev-qa-db-fra.com

Obtenir l'emplacement de hachage d'URL et l'utiliser dans jQuery

Je voudrais obtenir la valeur après un hachage dans l'URL de la page actuelle et pouvoir ensuite l'appliquer dans une nouvelle fonction ... par exemple.

L'URL pourrait être

www.example.com/index.html#foo

Et je voudrais l'utiliser en conjonction avec le code suivant

$('ul#foo:first').show();

Je suppose un peu/espère qu'il y a un moyen de saisir cela et de le transformer en une variable que je pourrai ensuite utiliser dans le deuxième morceau de code.

jqueryurlhashfragment-identifier
130
Robbie White

Note de l'éditeur: L'approche ci-dessous a de graves implications pour la sécurité et, en fonction de la version de jQuery que vous utilisez, peuvent exposer vos utilisateurs à des attaques XSS. Pour plus de détails, voir la discussion sur l'attaque possible dans les commentaires sur cette réponse ou cette explication sur Security Stack Exchange .

Vous pouvez utiliser la propriété location.hash pour récupérer le hachage de la page en cours:

_var hash = window.location.hash;
$('ul'+hash+':first').show();
_

Notez que cette propriété contient déjà le symbole _#_ au début.

En fait, vous n’avez pas besoin du pseudo-sélecteur _:first_ puisque vous utilisez le sélecteur d’ID , on suppose que les ID sont uniques dans le DOM.

Si vous voulez obtenir le hachage d'une chaîne d'URL, vous pouvez utiliser la méthode String.substring :

_var url = "http://example.com/file.htm#foo";
var hash = url.substring(url.indexOf('#')); // '#foo'
_

Conseil: Sachez que l'utilisateur peut modifier le hachage à sa guise. , en injectant quoi que ce soit à votre sélecteur, vous devriez vérifier le hash avant de l’utiliser.

267
CMS

location.hash n'est pas sûr pour IE, dans le cas de IE (y compris IE9), si votre page contient un iframe, alors après l'actualisation manuelle dans le contenu de l'iframe, la valeur location.hash est old (valeur pour le chargement de la première page). alors que la valeur récupérée manuellement est différente de location.hash, vous devez donc toujours la récupérer via document.URL.

var hash = document.URL.substr(document.URL.indexOf('#')+1)
35
Deepak Patil

Pour ceux qui recherchent une solution javascript pure

 document.getElementById(location.hash.substring(1)).style.display = 'block'

J'espère que cela vous fait gagner du temps.

2
Matas Vaitkevicius

Depuis jQuery 1.9, le sélecteur :target correspond au hachage de l'URL. Alors tu pourrais faire:

_$(":target").show(); // or $("ul:target").show();
_

Ce qui sélectionnerait l'élément avec l'ID correspondant au hachage et l'afficherait.

2
j08691

Je suggérerais mieux cek en premier si la page en cours a un hash. Sinon, ce sera undefined.

$(window).on('load', function(){        
    if( location.hash && location.hash.length ) {
       var hash = decodeURIComponent(location.hash.substr(1));
       $('ul'+hash+':first').show();;
    }       
});
0
Chetabahana