Apply onclick to all links in a page (or div)

@illtronMar 03.2005

Here’s my situation:

I have a page set up for personal use that has three frames. In one of the frames is a list of links that are generated by a content management system. Unfortunately, I don’t have control over how the links are formatted, so I can’t tell it to automatically include any kind of onClick in the actual links.

The target for the links is another frame. I have a test link set up with an onClick to write the URL of the link and the text of the link to a textarea in another frame. It works correctly (in everything but IE, but maybe we can address that later).

I’m not very well-versed with JavaScript, so you may need to hold my hand through this. I’d like to set something up so that every link on the page, or at least the links in certain divs on the page writes to that textarea in the other frame. Can you help me with this?

This is the test link, including the onClick…

[code] <a href=”page.html” onclick=”parent.topframe.document.getElementById(‘thebox’).value=href+’r’+text”>This is the test link</a> [/code]

I’ve posted about this elsewhere, and I haven’t been able to get a good answer about it. Thanks if you can help, I really appreciate it!

to post a comment

JavaScript

18 Comments(s) _↴

@TheBearMayMar 03.2005 — #

[code=php]
  for (i=0;i<document.links.length;i++){
 document.links[i].setAttribute("onclick","alert('onClick')");
 document.links[i].setAttribute("href","javascript:alert('href')");
 }
 [/code]

I added a replace of the href because IE doesn't want to fire the onclick when it's set this way, but will execute the href value.

@illtronauthorMar 03.2005 — #I think I need a little help on how I would implement that. I'm not very familiar with scripting, so I don't know exactly where that would go. Would that just go in a script? Thanks...

@TheBearMayMar 03.2005 — #It'll have to execute after the document has loaded, but yes it can be placed up in the script area.

[code=php]
 <head>
 <script type="text/javascript">
 function addClick(){
 for (i=0;i<document.links.length;i++){
 document.links[i].setAttribute("onclick","alert('onClick')");
 document.links[i].setAttribute("href","java script:alert('href')");
 }
 }
 </script>
 <body onload="addClick()">
 ...
 [/code]

@illtronauthorMar 03.2005 — #OK, some progress to report...

Using the default values you provided, I can get the alert to pop up. That means that the problem is with me :-)

Now, when I make this the script, using the action that I want, I get errors...

<i>
 </i>&lt;script type="text/javascript"&gt;
 function addClick(){
 for (i=0;i&lt;document.links.length;i++){
 document.links[i].setAttribute("onclick","parent.topframe.document.getElementById('thebox').value=href+'r'+text");
 document.links[i].setAttribute("href","java script:alert('href')");
 }
 }
 &lt;/script&gt;

Nothing appears in my textarea in the other frame, and I have these errors in the javascript console when I click a link...

[code=php]
 Error: unterminated string literal
 Source Code:
 parent.topframe.document.getElementById('thebox').value=href+'
 
 Error: unterminated string literal
 Source Code:
 parent.topframe.document.getElementById('thebox').value=href+'
 
 Error: unterminated string literal
 Source Code:
 parent.topframe.document.getElementById('thebox').value=href+'
 
 Error: uncaught exception: [Exception... "Failure"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: chrome://tabextensions/content/browserService.js :: 
 anonymous :: line 2504"  data: no]
 [/code]

Edit: That last one looks to be something with Firefox, but I'm not too concerned about it.

@illtronauthorMar 03.2005 — #One other thing, what's the href part for? That interferes with the actual link, which opens the linked pages in yet another frame. The result that I'm looking to get in the textarea is this:

<i>
 </i>http://www.addressoflink.com/linkpage.html
 Link text here

@TheBearMayMar 03.2005 — #May want to try something like this instead:

<i>
 </i>function addClick(){
 for (i=0;i&lt;document.links.length;i++){
 var hHref=document.links[i].getAttribute("href")
 document.links[i].setAttribute("onclick","intercept('"+hHref+"')");
 document.links[i].setAttribute("href","javascript:intercept('"+hHref+"')");
 }
 }
 function intercept(hRef){
 var text="someValueHere";
 parent.topframe.document.getElementById('thebox').value=hRef+'r'+text
 }

@illtronauthorMar 03.2005 — #That's really close.

That writes the href in the textarea exactly how I want it, but for the text, I just get someValueHere.

So my result is this:

/this/is/the/path/to/the/file.html

someValueHere

I understand how that occurs, from the script. How do I get it to just have the actual text of the link appear, rather than some value I would place in the script?

I'm really bad with Javascript, but I thought that "text" was the object that would have given me just the text of the link (back in what i originally posted). I played around with the script a bit and I can't figure out how to get it to give me the actual text of the link on that second line.

Thanks!

@TheBearMayMar 03.2005 — #By the text of the link do you mean the associated HTML of the link? If so make this change:

<i>
 </i>function addClick(){
 for (i=0;i&lt;document.links.length;i++){
 var hHref=document.links[i].getAttribute("href")
 document.links[i].setAttribute("onclick","intercept('"+hHref+"')");
 document.links[i].setAttribute("href","java script:intercept('"+hHref+"')");
 }
 }
 function intercept(hRef){
 oxmlhttp = null;
 try{
 oxmlhttp = new XMLHttpRequest();
 oxmlhttp.overrideMimeType("text/xml");
 }
 catch(e){
 try{
 oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch(e){
 return null;
 }
 }
 if(!oxmlhttp) return null;
 try{
 oxmlhttp.open("GET",hRef,false);
 oxmlhttp.send(null);
 }
 catch(e){
 return null;
 }
 var text=oxmlhttp.responseText;
 parent.topframe.document.getElementById('thebox').value=hRef+'r'+text
 }

@illtronauthorMar 03.2005 — #No, nothing that complex. Just the text. For example if this is my link,

<i>
 </i>&lt;a href="/path/to/the/page.html"&gt;This is the link&lt;/a&gt;

This would be my output in the textarea:

<i>
 </i>/path/to/the/page.html
 This is the link

@TheBearMayMar 03.2005 — #Oh that, try this then:

<i>
 </i>function addClick(){
 for (i=0;i&lt;document.links.length;i++){
 var hHref=document.links[i].getAttribute("href")
 var lTxt=document.links[i].lastChild.nodeValue;
 document.links[i].setAttribute("onclick","intercept('"+hHref+"','"+lTxt+"')");
 document.links[i].setAttribute("href","javascript:intercept('"+hHref+"','"+lTxt+"')");
 }
 }
 function intercept(hRef,lTxt){
 parent.topframe.document.getElementById('thebox').value=hRef+'r'+lTxt;
 }

@illtronauthorMar 03.2005 — #I get this result in my textarea:

/path/to/the/page.html

null

Also, I notice that this line seems to be extraneous for what I'm trying to do:

document.links[i].setAttribute("href","javascript:intercept('"+hHref+"','"+lTxt+"')");

I don't need to set any value for the href attribute of the link. That needs to be passed on to another frame, which I'm using the html <base> tag to set the target for the page to the other frame. That seems to cancel it out, and nothing loads in the other frame with that in place. WHen I remove it, however, I get the desired result in the other frame.

@TheBearMayMar 03.2005 — #Try replacing this line:

var lTxt=document.links[i].lastChild.nodeValue;

with:

var lTxt=document.links[i].innerHTML;

@illtronauthorMar 03.2005 — #Success! It works!

You've been an absolutely huge help! I can't thank you enough!

For some reason, nothing happens in Internet Explorer, but if it's a pain to get it working, then I can live without IE. 99% of the time, I'm the only one who will ever be seeing this page since.

I'm also noticing that there's a weird problem where it works for a most links, but not others. Can you think of anything that would cause it not to work? All of the links are formatted identically.

@TheBearMayMar 03.2005 — #For some reason IE doesn't seem to execute the onclick when it's added this way. That's why I was modifying the href value.

@illtronauthorMar 03.2005 — #I gotcha. Screw IE then, because when adding that, it causes other headaches for me.

Could this line be causing this not to function for some links?

for (i=0;i<document.links.length;i++){

I have no clue what exactly that does, but it appears to have something to do with the links. Some of them that I'm dealing with are quite long, and the longer ones seem to be the ones affected. Am I imagining the connection?

@Willy_DuittMar 03.2005 — #[i]Originally posted by TheBearMay [/i]

[B]For some reason IE doesn't seem to execute the onclick when it's added this way. That's why I was modifying the href value. [/B][/QUOTE]

[b]onclick[/b] or [b]click[/b] as it were...

[b]IS NOT[/b] an attribute!! Is is an [b]event[/b]...

Thus, you are calling it all wrong and is not a problem with IE but rather your coding technique... But then again, the heh with IE, right??

.....Willy

@SyllApr 01.2007 — #I realize this is a 2-year old thread, but...

I'd very much like to understand how this works.

I think I could use this script to apply an onclick that swaps images... but I'm not sure how to go about doing so.

I have something like this: (I realize I could be way off on the intercept part)

[CODE]function addClick(){
 for (i=0;i<document.links.length;i++){
 var hHref=document.links[i].getAttribute("href")
 var lTxt=document.links[i].innerHTML;
 document.links[i].setAttribute("onclick","intercept('"+hHref+"','"+lTxt+"')");
 document.links[i].setAttribute("href","javascript:intercept('"+hHref+"','"+lTxt+"')");
 }
 }
 function intercept(hRef,lTxt){
 getElementsByClassName(document, "a", "artist").value=hRef+'r'+lTxt;
 }[/CODE]

Anyone care to help? ?

Also in #JavaScript _↴

Set time change interval Intermittant problem with focus within iframe My script won't work in Internet Explorer. Help?

Success!

Help @illtron spread the word by sharing this article on Twitter...

Tweet This

Apply onclick to all links in a page (or div)

18 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Apply onclick to all links in a page (or div)

18 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #JavaScript _↴