Obtenir l'emplacement du hachage d'URL et l'utiliser en jQuery

Question

Je voudrais obtenir la valeur après un hash dans l'URL de la page actuelle, puis être en mesure d'appliquer ceci dans une nouvelle fonction... par exemple.

L'URL pourrait être

www.example.com/index.html#foo

Et j'aimerais utiliser ceci en conjonction avec le morceau de code suivant

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

Je suppose un peu / j'espère qu'il y a un moyen de récupérer ceci, et de le transformer en une variable que je peux ensuite utiliser dans le deuxième morceau de code.

Answer 1

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

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

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

Remarquez 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 ID, il est supposé que les IDs sont uniques dans le DOM.

Dans le cas où vous souhaitez obtenir le hash à partir 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 changer le hash comme il le souhaite, injectant n'importe quoi dans votre sélecteur, vous devriez vérifier le hash avant de l'utiliser.

Answer 2

location.hash n'est pas sûr pour IE, dans le cas d'IE (y compris IE9), si votre page contient une iframe, alors après un rafraîchissement manuel à l'intérieur du contenu de l'iframe, la valeur de location.hash est ancienne (valeur lors du premier chargement de la page). Alors que la valeur manuellement récupérée est différente de location.hash, donc toujours la récupérer à travers document.URL

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

Answer 3

Pour ceux qui recherchent une solution purement en javascript

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

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

Answer 4

Depuis jQuery 1.9, le sélecteur :target correspondra au hash de l'URL. Vous pouvez donc faire :

$(":target").show(); // ou $("ul:target").show();

Cela sélectionnerait l'élément avec l'ID correspondant au hash et l'afficherait.

Answer 5

Je l'utilise pour aborder les implications de sécurité notées dans la réponse de @CMS.

// exemple 1: www.example.com/index.html#foo

// charger la sous-page correcte à partir de la hash URL si elle existe
$(window).on('load', function () {
    var hash = window.location.hash;
    if (hash) {
        hash = hash.replace('#',''); // supprimer le # au début de la chaîne
        hash = hash.replace(/([^a-z0-9]+)/gi, '-'); // supprimer tous les caractères non alphanumériques
        hash = '#' + hash; // hash est maintenant égal à #foo avec l'exemple 1

        // faire quelque chose avec hash
        $( 'ul' + hash + ':first' ).show();
        // etc...
    }
});