Получение местоположения хэша URL и его использование в jQuery

Я хотел бы получить значение после хэша в URL текущей страницы, а затем иметь возможность применить это в новой функции... например.

URL может быть

www.example.com/index.html#foo

и я хотел бы использовать это в сочетании со следующим фрагментом кода

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

Я как бы предполагаю / надеюсь, что есть какой-то способ схватить это и превратить его в переменную, которую я могу использовать во втором фрагменте кода.

121
fragment-identifier hash jquery url

5 ответов

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

можно использовать location.hash свойство, чтобы захватить хэш текущая страница:

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

обратите внимание, что это свойство уже содержит # символ в начале.

на самом деле вам не нужны :first псевдо-селектор, так как вы используете ID-селектор, предполагается, что идентификаторы уникальный внутри DOM.

если вы хотите получить хэш из строки URL, вы можете использовать String.substring способ:

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

Совет: будьте в курсе что пользователь можете изменить хэш, как он хочет, вводя что-либо в селектор, вы должны проверить хэш перед его использованием.

255

расположение.хэш не является безопасным для IE, В случае IE (включая IE9 ) , если ваша страница содержит iframe , то после ручного обновления внутри содержимого iframe получите местоположение.хэш-значение старое (значение для загрузки первой страницы ). в то время как полученное вручную значение отличается от местоположения.хэш, поэтому всегда извлекайте его через документ.URL-адрес

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

для тех, кто ищет чистое решение javascript 

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

надеюсь, это сэкономит вам время.

2

Я бы предложил сначала cek, если текущая страница имеет хэш. Иначе будет undefined.

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

начиная с jQuery 1.9,:target селектор будет соответствовать хэшу URL. Так что вы могли бы сделать:

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

что бы выбрать элемент с ID, соответствующим хэш и показать его.

0