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

Question

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

L'URL pourrait ê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/espère qu'il existe un moyen de saisir cette information et de la 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, selon 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 le location.hash 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 # au début.

En fait, vous n'avez pas besoin de la :first étant donné que vous utilisez le pseudo-sélecteur Sélecteur d'identité On suppose que les ID sont unique dans le DOM.

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

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

Conseil : Sachez que l'utilisateur peut changer 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.

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 de l'iframe, le contenu récupère la valeur de location.hash qui est ancienne (valeur du premier chargement de la page). Alors que la valeur récupérée manuellement est différente de location.hash, il faut toujours la récupérer via document.URL.

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

Answer 3

Pour ceux qui recherchent une solution purement javascript

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

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

Answer 4

Depuis jQuery 1.9, la fonction :target correspondra au hachage de l'URL. Vous pourriez donc le faire :

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

Ce qui sélectionnerait l'élément dont l'ID correspond au hachage et l'afficherait.

Answer 5

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