jQuery 如果 url 哈希,单击事件/激活 javascript

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11895681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 14:41:53  来源:igfitidea点击:

jQuery if url hash, click event/activate javascript

javascriptjqueryurl

提问by Alex Anonymous

So from the home page, i have a link that goes to a products listing page. The product page has expand/collapse divs.

所以从主页上,我有一个链接到产品列表页面。产品页面具有展开/折叠 div。

I need the appropriate div to expand depending on what the url# is.

我需要适当的 div 来扩展,具体取决于 url# 是什么。

So the link on the homepage is

所以主页上的链接是

<a href="/out-products.php#healthysnacks">healthy snacks</a>

when i click the link above, i am trying to activate this, on the product page:

当我点击上面的链接时,我试图在产品页面上激活它:

<a href="javascript:ReverseDisplay('products4')" id="healthysnacks"> Healthy Snacks</a>

I've tried some of the other codes that i found that trigger click by checking for hash tag and none of them were working properly, i think it's because of the ReverseDisplay js. Please any insight would help.

我已经尝试了一些其他代码,我发现通过检查哈希标签来触发点击,但它们都没有正常工作,我认为这是因为 ReverseDisplay js。请任何见解都会有所帮助。

thanks

谢谢

采纳答案by nbrooks

You can make the following changes in the document ready function of your product page:

您可以在产品页面的文档准备功能中进行以下更改:

Simple fix:Since the jQuery id-selector is #elementId, you can simply use the window.location.hashvalue as your id selector, and use it to target the desired element.

简单的修复:由于 jQuery id-selector is #elementId,您可以简单地使用该window.location.hash值作为您的 id 选择器,并使用它来定位所需的元素。

if ( window.location.hash ) {
    $(window.location.hash).click(); //clicks on element specified by hash
}

Better:In addition to the above, take the js out of your markup.

更好:除上述之外,将 js 从您的标记中移除。

$('#healthysnacks').click(function(e) {
    e.preventDefault();
    ReverseDisplay('products4');
});

Then, after doing this, use the $(window.location.hash).click()code from above. Also, change your link to:

然后,在执行此操作后,使用$(window.location.hash).click()上面的代码。另外,将您的链接更改为:

<a href="#" id="healthysnacks"> Healthy Snacks</a>

回答by Ram

The answers suggested here are valid, but...

这里建议的答案是有效的,但是......

Be extremely careful when using the window.location.hash as it is in a jQuery selector because this could lead to a XSS vulnerability. $() can also create an HTML element and with a carefully constructed hash value, someone could execute arbitrary JavaScript code.

使用 jQuery 选择器中的 window.location.hash 时要格外小心,因为这可能导致 XSS 漏洞。$() 还可以创建一个 HTML 元素,并且通过精心构造的哈希值,有人可以执行任意 JavaScript 代码。

For example

例如

http://my-website.com/about#'><img src=x onerror=alert(/XSSed/)>

http://my-website.com/about#'><img src=x onerror=alert(/XSSed/)>

If my-websites.com/about page uses the window.location.hash inside a jQuery selector, that onerror code would end up getting executed.

如果 my-websites.com/about 页面在 jQuery 选择器中使用 window.location.hash,则该 onerror 代码最终会被执行。

回答by undefined

You can use the hashproperty of the Locationobject, try the following:

您可以使用对象的hash属性Location,尝试以下操作:

$(document).ready(function(){
   var id = window.location.hash;
   $(id).trigger('click')
})

As you are using jQuery instead of using javascript:protocol, you can use the jQuery clickmethod:

当您使用 jQuery 而不是使用javascript:协议时,您可以使用 jQueryclick方法:

$('#healthysnacks').click(function() {
   // do something here
})