Uzyskanie lokalizacji skrótu adresu URL i użycie go w jQuery

Chciałbym uzyskać wartość po krzyżyku w adresie URL bieżącej strony, a następnie móc zastosować ją w nowej funkcji ... np.

Może to być adres URL

www.example.com/index.html#foo

Chciałbym tego użyć w połączeniu z następującym fragmentem kodu

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

Zakładam / mam nadzieję, że jest jakiś sposób na złapanie tego i przekształcenie w zmienną, której mogę następnie użyć w drugim fragmencie kodu.

Uwaga edytora: poniższe podejście ma poważne konsekwencje dla bezpieczeństwa i, w zależności od używanej wersji jQuery, może narazić użytkowników na ataki XSS. Aby uzyskać więcej informacji, zapoznaj się z omówieniem możliwego ataku w komentarzach do tej odpowiedzi lub w tym wyjaśnieniu dotyczącym programu Security Stack Exchange .

Możesz użyć tej location.hashwłaściwości, aby pobrać hash bieżącej strony:

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

Zauważ, że ta właściwość zawiera już #symbol na początku.

Właściwie nie potrzebujesz :firstpseudo-selektora, ponieważ używasz selektora ID , zakłada się, że identyfikatory są unikalne w ramach DOM.

W przypadku, gdy chcesz uzyskać hash z ciągu adresu URL, możesz użyć String.substringmetody:

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

Rada: pamiętaj, że użytkownik może zmienić hash, jak chce, wstrzykując cokolwiek do twojego selektora, powinieneś sprawdzić hash przed jego użyciem.

location.hash nie jest bezpieczny dla IE , w przypadku IE (w tym IE9), jeśli Twoja strona zawiera iframe, to po ręcznym odświeżeniu wewnątrz treści iframe uzyskaj wartość location.hash jest stara (wartość dla pierwszej strony załadowanej). podczas gdy ręcznie pobierana wartość różni się od location.hash, więc zawsze pobieraj ją za pośrednictwem document.URL

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

Dla tych, którzy szukają czystego rozwiązania javascript

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

Mam nadzieję, że zaoszczędzi ci to trochę czasu.

Od wersji jQuery 1.9 :targetselektor będzie pasował do skrótu adresu URL. Więc możesz zrobić:

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

Który wybrałby element z identyfikatorem pasującym do skrótu i ​​pokazałby go.

Sugerowałbym najpierw lepiej cek, jeśli bieżąca strona ma hash. W przeciwnym razie tak będzie undefined.

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

Używam tego, aby rozwiązać wpływ na bezpieczeństwo odnotowany w odpowiedzi @ 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...
    }
});