JavaScript parse href and add onclick if linking to a PDF

Question

I would like to parse all of the HTML within a document and if there is a link to a PDF, add an onClick event.

Example:

<a href="/files/report.pdf">Report</a>

Becomes:

<a href="/files/report.pdf" onclick="javascript: _gaq.push(['_trackPageview', '/files/report.pdf']);">Report</a>

The following code works in Chrome/Firefox but not on IE9:

function AddGaqPush()
    {
        var links = document.getElementsByTagName("a");

        for (var i=0; i < links.length; i++)
        {
            if (links[i].href.indexOf(".pdf") !== -1)
            {
                links[i].setAttribute("onclick", "javascript: _gaq.push(['_trackPageview', '" + links[i].href + "']);");
            }
        }
    }

Edited to add: IE settings: Browser Mode: IE9; Document Mode: IE9 Standards

Updated Q with detail: Browser Mode: IE9; Document Mode: IE9 Standards — Charles Wesley, Jan 25 '13 at 00:20
so something like links[i].addEventListener("click", "javascript: _gaq.push(['_trackPageview', '" + links[i].href + "']);", false); ? — Charles Wesley, Jan 25 '13 at 00:22
`links[i].addEventListener("click", function(){...})`. Don't use strings for code, ever. — John Dvorak, Jan 25 '13 at 00:24

score 4 · Accepted Answer · answered Jan 25 '13 at 00:26

4

Use jQuery and you won't be limited by the browser (especially IE)

$('a[href~=.pdf]').click(function(e) {
    // your click action
    // e is a jQuery event
    // your <a> element is the variable this
});

answered Jan 25 '13 at 00:26

Leo supports Monica Cellio

5,926
2
22
34

score 3 · Answer 2 · answered Jan 25 '13 at 00:24

3

Instead of adding an attribute, attach an event handler

if (links[i].attachEvent){
    links[i].attachEvent('onclick', tpv);
}
else{
    links[i].addEventListener('click', tpv);
}
function tpv(){
    _gaq.push(['_trackPageview', '" + this.href + "']);
}

answered Jan 25 '13 at 00:24

Musa

96,336
17
118
137

I'd rather shim `AEL` than branch everywhere (if that was possible :-( ) – John Dvorak Jan 25 '13 at 00:25
1

@Jeff if used with a string... yeah. If used with functions... yeah, you still overwrite previous handlers – John Dvorak Jan 25 '13 at 00:28
@JanDvorak Ah, it's the overwriting that I forgot about. Thanks :) – Jeff Jan 25 '13 at 00:31
@Jan that's a great link (addEventListener vs onclick) – Charles Wesley Jan 25 '13 at 00:31

score 2 · Answer 3 · answered Nov 11 '14 at 01:08

The jQuery statement to accomplish this would look like:

$('a[href*=".pdf"]').click(function(e) {
    _gaq.push(['_trackPageview', $(this).attr('href')]);
});

I liked Nannuo Lei's answer to this question but the solution wasn't quite accurate/complete and I don't yet have sufficient reputation to comment on that post.

You will want quotes around the string you are searching for and the *= selector allows you to identify a substring of a larger string, not just a word separated by whitespace as the ~= selector will accomplish. More detail on jQuery selectors can be found here: https://api.jquery.com/category/selectors/

JavaScript parse href and add onclick if linking to a PDF

3 Answers3