Abrufen des URL-Hash-Speicherorts und Verwenden in jQuery

Ich möchte den Wert nach einem Hash in der URL der aktuellen Seite abrufen und ihn dann in einer neuen Funktion anwenden können ... z.

Die URL könnte sein

www.example.com/index.html#foo

Und ich möchte dies in Verbindung mit dem folgenden Code verwenden

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

Ich gehe davon aus / hoffe, dass es eine Möglichkeit gibt, dies zu erfassen und es in eine Variable umzuwandeln, die ich dann im zweiten Code verwenden kann.

Anmerkung des Herausgebers: Der folgende Ansatz hat schwerwiegende Auswirkungen auf die Sicherheit und kann Ihre Benutzer abhängig von der von Ihnen verwendeten Version von jQuery XSS-Angriffen aussetzen. Weitere Informationen finden Sie in der Diskussion des möglichen Angriffs in den Kommentaren zu dieser Antwort oder in dieser Erklärung zu Security Stack Exchange .

Mit der location.hashEigenschaft können Sie den Hash der aktuellen Seite abrufen:

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

Beachten Sie, dass diese Eigenschaft das #Symbol bereits am Anfang enthält.

Tatsächlich benötigen Sie den :firstPseudo-Selektor nicht, da Sie den ID-Selektor verwenden . Es wird davon ausgegangen, dass IDs innerhalb des DOM eindeutig sind .

Wenn Sie den Hash von einer URL-Zeichenfolge abrufen möchten, können Sie die folgende String.substringMethode verwenden:

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

Hinweis: Beachten Sie, dass der Benutzer den Hash nach Belieben ändern kann , indem Sie etwas in Ihren Selektor injizieren. Sie sollten den Hash überprüfen, bevor Sie ihn verwenden.

location.hash ist für IE nicht sicher. Wenn IE (einschließlich IE9) IE enthält, enthält Ihre Seite nach der manuellen Aktualisierung des iframe-Inhalts den Wert location.hash (Wert für das Laden der ersten Seite). Der manuell abgerufene Wert unterscheidet sich von location.hash. Rufen Sie ihn daher immer über document.URL ab

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

Für diejenigen, die nach einer reinen Javascript-Lösung suchen

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

Hoffe das spart dir etwas Zeit.

Seit jQuery 1.9 stimmt der :targetSelektor mit dem URL-Hash überein. So könnten Sie tun:

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

Welches würde das Element mit der ID auswählen, die mit dem Hash übereinstimmt, und es anzeigen.

Ich würde empfehlen, zuerst besser zu cek, wenn die aktuelle Seite einen Hash hat. Sonst wird es sein undefined.

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

Ich verwende dies, um die Sicherheitsaspekte zu beheben, die in der Antwort von @ CMS angegeben sind.

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