从刚刚点击的<a href>中添加参数到URL

Question

情景是有很多HTML文件并且它们之间有更多的链接。当我调用它们中的第一个（它将是索引）时，该链接会通过URL传递几个参数（我们可以称其为首选项）。

现在，我希望在单击页面上的任意链接时添加这些参数。因此，问题与另一个类似（如何向已包含其他参数和可能包含锚的URL添加参数），但在单击链接后执行此操作。

我知道其中一种解决方法可能是更改每个链接上的onclick事件，但由于可能有数千个，而且没有常规的URL格式...我正在寻找一个可以放在头部脚本中的解决方案；也许与onbeforeunload事件相关的内容。

无论如何，我找不到如何做到这点。有什么想法吗？

- rcerecedar

---

所以这些参数会随着每个请求而移动？对吗？ - Yiğit Yener

Answer 1

这将在任何包含 href 属性的元素被点击时将字符串附加到其中：

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

这里有一个例子：http://jsfiddle.net/E5Q7P/

< IE9浏览器不支持此方法。

- Jan Sommer

---

它起作用了！非常感谢。顺便说一下：我正在一个包括PhoneGap的Android应用程序中使用它。当我在运行Linux的Mozilla Firefox 10.0.7上尝试时，它没有起作用。 - rcerecedar

我认为srcElement是问题所在。那是IE属性，正确的属性应该是target。似乎chrome也出于某种原因实现了srcElement。我已经相应地更改了代码。 - Jan Sommer

Answer 2

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

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

一个非常简单的示例：

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});
}​

- Christofer Eliasson