Получение URL-адреса и его использование в jQuery

Question

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

URL может быть

www.example.com/index.html#foo

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

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

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

Answer 1

Примечание редактора: подход, приведенный ниже, имеет серьезные последствия для безопасности и, в зависимости от используемой версии jQuery, может подвергать ваших пользователей атакам XSS. Для получения более подробной информации см. Обсуждение возможной атаки в комментариях к этому ответу или это объяснение в Exchange 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'

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

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

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