Отримання URL-адреси хеша URL-адреси та використання його в jQuery

Я хотів би отримати значення після хешу в URL-адресі поточної сторінки, а потім зможу застосувати це в новій функції ... наприклад.

URL-адреса могла бути

www.example.com/index.html#foo

І я хотів би використати це разом із наступним фрагментом коду

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

Я якось припускаю / сподіваюся, що існує якийсь спосіб схопити це і перетворити його в змінну, яку я потім можу використовувати у другому фрагменті коду.

Примітка редактора: підхід, наведений нижче, має серйозні наслідки для безпеки і, залежно від версії jQuery, яку ви використовуєте, може піддавати ваших користувачів атакам XSS. Більш детально дивіться обговорення можливої ​​атаки в коментарях до цієї відповіді або в цьому поясненні на Exchange Stack Exchange .

Ви можете використовувати location.hashвластивість, щоб схопити хеш поточної сторінки:

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

Зауважте, що ця властивість вже містить #символ на початку.

Насправді вам не потрібен :firstпсевдоселектор, оскільки ви використовуєте селектор ідентифікаторів , передбачається, що ідентифікатори є унікальними у DOM.

Якщо ви хочете отримати хеш із рядка URL-адреси, ви можете скористатися String.substringметодом:

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

Порада: Будьте в курсі, що користувач може змінювати хеш так, як він хоче, вводячи що-небудь у ваш селектор, ви повинні перевірити хеш перед його використанням.

location.hash не є безпечним для IE , якщо IE (включаючи IE9), якщо на вашій сторінці міститься iframe, то після ручного оновлення вмісту iframe отримайте значення location.hash старе (значення для завантаження першої сторінки). а отримане вручну значення відрізняється від location.hash, тому завжди отримуйте його через document.URL

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

Для тих, хто шукає чисте рішення JavaScript

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

Сподіваюсь, це заощадить певний час.

Оскільки jQuery 1.9, :targetселектор буде відповідати хешу URL-адреси. Так ви могли зробити:

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

Який би обрав елемент із ідентифікатором, що відповідає хешу, і показав би його.

Я б запропонував краще cek спочатку, якщо на поточній сторінці є хеш. Інакше буде undefined.

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

Я використовую це для вирішення наслідків безпеки, зазначених у відповіді @ 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...
    }
});