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

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

L'URL peut être

www.example.com/index.html#foo

Et je voudrais utiliser ceci en conjonction avec le morceau de code suivant

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

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

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

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

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 :firstpseudo-sélecteur puisque vous utilisez le sélecteur d'ID , on suppose que les ID sont uniques dans le DOM.

Si vous souhaitez obtenir le hachage à partir d'une chaîne d'URL, vous pouvez utiliser la String.substringméthode:

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

Conseil: sachez que l'utilisateur peut modifier le hachage comme il le souhaite, en injectant n'importe quoi dans votre sélecteur, vous devez vérifier le hachage avant de l'utiliser.

location.hash n'est pas sûr pour IE , dans le cas d'IE (y compris IE9), si votre page contient iframe, puis après une actualisation manuelle à l'intérieur du contenu iframe, la valeur location.hash est ancienne (valeur pour le chargement de la première page). alors que la valeur récupérée manuellement est différente de location.hash, récupérez-la toujours via document.URL

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

Pour ceux qui recherchent une solution javascript pure

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

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

Depuis jQuery 1.9, le :targetsélecteur correspondra au hachage de l'URL. Vous pouvez donc faire:

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

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

Je suggérerais mieux cek d'abord si la page actuelle a un hachage. Sinon, ce sera le cas undefined.

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

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

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

// load correct subpage from URL hash if it exists
$(window).on('load', function () {
    var hash = window.location.hash;
    if (hash) {
        hash = hash.replace('#',''); // strip the # at the beginning of the string
        hash = hash.replace(/([^a-z0-9]+)/gi, '-'); // strip all non-alphanumeric characters
        hash = '#' + hash; // hash now equals #foo with example 1

        // do stuff with hash
        $( 'ul' + hash + ':first' ).show();
        // etc...
    }
});