javascript 从刚刚单击的 <a href> 向 URL 添加参数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12781345/
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 17:06:10  来源:igfitidea点击:

Add parameters to an URL from a <a href> just clicked

javascript

提问by rcerecedar

The scenario is a lot of html files with a lot more of links between them. When I call the first one of them (it would be the index), the link pass several parameters through the URL (we could call them preferences).

这个场景是很多 html 文件,它们之间有更多的链接。当我调用它们中的第一个(它将是索引)时,链接通过 URL 传递几个参数(我们可以称它们为首选项)。

Now I want that, when clicking any of the several links of the page, those parameters would be added. So the problem would be similar to this other ( How to add parameters to a URL that already contains other parameters and maybe an anchor) but doing it just after clicking the link.

现在我想要的是,当单击页面的多个链接中的任何一个时,将添加这些参数。因此,问题将与其他问题类似(如何将参数添加到已经包含其他参数和锚点的 URL),但在单击链接后才执行此操作。

I know that one solution could be changing the onclickevent on each link, but as there may be thousands of them, without a regular url format... I'm looking for a solution that could be on the script at the head; perhaps something relative to onbeforeunloadevent.

我知道一个解决方案可能是更改每个链接上的onclick事件,但由于可能有数千个,没有常规的 url 格式... 也许与onbeforeunload事件有关。

Anyway I couldn't find how to do it. Any ideas?

无论如何,我找不到如何去做。有任何想法吗?

回答by Jan Sommer

This will append a string to anything containing an href-attribute when being clicked:

这将在单击时将字符串附加到包含 href 属性的任何内容:

window.addEventListener("click", function(e) {
    var href = e.target.getAttribute("href");
    if(href) {
        location.href = href + "?q=stackoverflow";
        e.preventDefault();
    }
});?

Example here: http://jsfiddle.net/E5Q7P/

这里的例子:http: //jsfiddle.net/E5Q7P/

Won't work in < IE9

不适用于 < IE9

回答by Christofer Eliasson

Instead of changing the onclick-attribute of each link, or using the onbeforeunload-event, I guess one way would be to attach a clickevent-listener to all anchor-elements when the page loads. The callback could then intercept the browsers default behavior to follow the link. You could then get the srcattribute of the a-element that was just clicked, add the desired preferences to the URL and then send the user to the proper location (including preferences) by setting window.location.hrefto the proper URL.

我想一种方法是在页面加载时将 clickevent-listener 附加到所有锚元素,而不是更改每个链接的 onclick 属性或使用 onbeforeunload 事件。然后回调可以拦截浏览器的默认行为以跟随链接。然后,您可以获取src刚刚单击的 a 元素的属性,将所需的首选项添加到 URL,然后通过设置window.location.href为正确的 URL将用户发送到正确的位置(包括首选项)。

There is a great aricleon MDN about event-listeners, that I believe would be helpful to you. Note specially the section about older versions of IE

MDN 上有一篇关于事件监听器的很棒的文章,我相信对你会有所帮助。特别注意有关旧版本 IE 的部分

A very crude example of what it could look like:

一个非常粗略的例子:

function callback(e){
  // Get the src of the clicked a-element
  var src = this.src;
  // Add preferences to the url, this need 
  // improvement depending on your needs
  src += "?somesetting=foo";
  // Send user to the url with preferences
  window.location.href = src;
}

// Get all anchors on page
var anchors = document.getElementsByTagName("a");

// Loop over the elements and attach listener
for(i=0 ; i < anchors.length ; i++){
  // Extend with support for older IE if needed
  anchors[i].addEventListener("click", callback, false});
}?