获取URL哈希位置,并在jQuery中使用它

Question

我想在当前页面的URL中获取哈希后的值,然后能够在新函数中应用它...例如.

URL可以是

www.example.com/index.html#foo

我想结合下面的代码使用它

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

我有点假设/希望有一些方法可以抓住这个,并把它变成一个变量,然后我可以在第二段代码中使用它.

Answer 1

编者注:以下方法具有严重的安全隐患,并且根据您使用的jQuery版本,可能会使您的用户暴露于XSS攻击.有关更多详细信息,请参阅有关此答案的注释中的可能攻击的讨论或有关安全堆栈交换的此解释.

您可以使用该location.hash属性获取当前页面的哈希值:

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

请注意,此属性已包含#开头的符号.

实际上,:first由于您使用的是ID选择器,因此您不需要伪选择器,因此假定ID 在DOM中是唯一的.

如果您想从URL字符串中获取哈希值,可以使用以下String.substring方法:

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

建议:请注意,用户可以根据需要更改哈希值,向选择器注入任何内容,您应该在使用之前检查哈希值.

Answer 2

对于IE来说,location.hash是不安全的,在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();

这将选择 ID 与哈希值匹配的元素并显示它。