当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《获取URL哈希位置,并在jQuery中使用它》经验,为你挑选了2个好方法。

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

URL可以是

www.example.com/index.html#foo

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

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

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



1> CMS..:

编者注:以下方法具有严重的安全隐患,并且根据您使用的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'

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


有些浏览器返回哈希符号,有些则没有,所以使用起来更安全:`var hash = location.hash.replace('#','');`
请注意,jQuery选择器可用于执行自定义javascript代码,因此使用未经过清理的哈希是可怕的,可怕的不安全.在最近的jQuery版本中,对于在注入代码之前包含#的选择器,有一个半定制的修复,但是如果从location.hash的开头删除#mark,则仍然存在风险.E. g.`var hash = location.hash.slice(1); $('ul.item'+ hash).show().append($('#content'));`这将执行放在哈希中的脚本标记.使用`$('body')是一个好习惯.find('ul'+ hash +':first')`而不是`$('ul'+ hash +':first')`.
Alice运行一个网站,Bob访问它,验证并接收会话cookie.(有些时候可能会在这里过去,鲍勃可能会关闭他的浏览器.)查理给鲍勃发了一封邮件说"看看这个很酷的链接!".鲍勃打开链接,通往查理控制的网站.该页面将Bob的浏览器重定向到Alice网站上的页面,其中哈希中有攻击有效负载.执行有效负载,并且由于浏览器仍然记住cookie,它可以将它们发送给Charlie.
@Tgr,谢谢你详细阐述和连接点.这个具体的例子使我(并希望其他人)更倾向于保持警惕,保持安全.
@buffer:`$(userInput)`通常是不安全的,因为`$`被重载,可能会搜索现有节点或创建新节点,具体取决于字符串是否包含`<>`字符.`$(document).find(userInput)`将始终搜索现有节点,因此不太安全.也就是说,最佳做法是始终清理用户输入,例如,如果您使用字母数字ID,请确保它是字母数字.

2> Deepak Patil..:

对于IE来说,location.hash是不安全的,在IE(包括IE9)的情况下,如果你的页面包含iframe,那么在iframe内容手动刷新之后获取location.hash值是旧的(第一页加载的值).手动检索的值与location.hash不同,因此始终通过document.URL检索它

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


更新:document.URL在firefox 3.6上不包含哈希值所以location.href是安全的var hash = location.href.substr(location.href.indexOf('#')+ 1)
推荐阅读
手机用户2402851155
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有