Add parameters to an URL from a just clicked

Question

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).

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.

I know that one solution could be changing the onclick event 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 onbeforeunload event.

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

So those parameters will move around with every request? Right? — Yiğit Yener, Oct 08 '12 at 12:16

Jan Sommer · Accepted Answer · 2015-09-19T18:56:14.353

11

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

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/

Won't work in < IE9

edited Sep 19 '15 at 18:56

answered Oct 08 '12 at 13:15

Jan Sommer

3,698
1
21
35

It worked! Thank you very much. BTW: I'm using it within an app for Android, including PhoneGap. When I tried it over Mozilla Firefox 10.0.7 (running on Linux) it didn't work. – rcerecedar Oct 08 '12 at 15:19
I think srcElement is the problem. That's an IE-property, and the right property would be target. Seems that chrome implements srcElement as well for some reason. I've changed the code accordingly. – Jan Sommer Oct 08 '12 at 16:04

Christofer Eliasson · Answer 2 · 2012-10-08T12:29:04.237

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 src attribute 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.href to the proper URL.

There is a great aricle on MDN about event-listeners, that I believe would be helpful to you. Note specially the section about older versions of 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});
}

Add parameters to an URL from a just clicked

2 Answers2

Linked