获取 URL 散列位置，并在 jQuery 中使用它

我希望在当前页面的 URL 中获取散列之后的值，然后能够将其应用到一个新函数中... ... 例如。

网址可能是

www.example.com/index.html#foo

我想把它和下面的代码结合起来使用

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

我有点假设/希望有某种方法可以获取它，并把它变成一个变量，然后在第二段代码中使用。

261353 次浏览
小开
最佳答案

编者按: 下面的方法有 严重的安全隐患，并且根据您使用的 jQuery 版本，可能会使您的用户暴露于 XSS 攻击。有关更多细节，请参见此答案或 在安全栈交换上的这个解释的注释中关于可能的攻击的讨论。

可以使用 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'

建议: 注意用户 可以改变的散列，注入任何东西到您的选择器，您应该在使用它之前检查散列。

小开

Hash 对 IE 不安全，对于 IE (包括 IE9) ，如果您的页面包含 iframe，那么在手动刷新 iframe 内容之后，get location.hash 值是 old (值用于第一页装载)。而手动检索的值不同于 location.hash，所以总是通过 document.URL 检索它

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

对于那些正在寻找纯 javascript 解决方案的人来说

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

希望这能为你节省点时间。

小开

如果当前页面有散列，我建议最好先用 cek。否则它将是 undefined。

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

因为 jQuery 1.9，:target选择器将匹配 URL 散列:

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

它将选择 ID 与散列匹配的元素并显示它。

小开

我使用它来解决@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...
}
});
小开

我发现标记的答案对我来说是不够的。它指出，从 URL 获取散列有巨大的安全缺陷，但没有提供真正的方法来对抗它。如果你想走 清除网址的路线，有很多方法，但是如果你只是简单的尝试 show()一个容器，或者应用一些 CSS/类到散列匹配的 ID 容器，那么有一个更简单的方法..。

介绍 :target选择器。

:target伪类表示与 URL 片段具有匹配 id 的唯一元素，这意味着只需执行以下操作即可将 JS 应用于该元素:

$(':target').show();

或者在我的例子中，只需使用 CSS 只有取消隐藏我想要的元素:

:target {
display: block;
}

我知道 OP 的答案几乎正好是13年前的，但是这是一个非常简单和更安全的方法来达到同样的效果，而不需要处理获取 URL、分割它、消毒它——见鬼，你甚至可以完全避免使用这种方法。

是的: 目标选择器是 得到了很好的支持


提交答案