getElementsByClassName in Internet Explorer

@A_WebdeveloperOct 06.2008

I can’t get getElementsByClassName to work in Internet Explorer.

What I want to do is open external links in a new window without using the target attribute (because the site is XHTML Strict) nor inline Javascript.
I’ve given the external links the class name “external”:

[code]<a href=”https://webdeveloper.com/” class=”external”>…</a>[/code]

I then wrote the following function, which works in all browsers (Mozilla Firefox, Opera, Google Chrome, Safari) except Internet Explorer:

[code]window.onload = function() { external=document.getElementsByClassName(‘external’); for (var i=0;i<external.length;i++) external[i].onclick=function() { window.open(this.href,’_blank’); return false; } }[/code]

How can I get this to work in Internet Explorer too?
Or which other function can do what I want in Internet Explorer?

to post a comment

JavaScript

20 Comments(s) _↴

@FangOct 06.2008 — #http://www.robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/

@A_WebdeveloperauthorOct 06.2008 — #Thank you for your reply.

I've removed the code I didn't need, which resulted in this code for Internet Explorer and other browsers without support for getElementsByClassName:

i = 0;
 a = document.getElementsByTagName("a");
 while (element = a[i++]) {
 if (element.className == "external") {
 a[i-1].onclick = function() {
 window.open(this.href,'_blank');
 return false;
 }
 }
 }

So the entire code becomes:

window.onload = function() {
 if (document.getElementsByClassName) {
 external = document.getElementsByClassName('external');
 for (var i = 0; i &lt; external.length; i++) external[i].onclick = function() {
 window.open(this.href,'_blank');
 return false;
 }
 }
 } else {
 i = 0;
 a = document.getElementsByTagName("a");
 while (element = a[i++]) {
 if (element.className == "external") {
 a[i-1].onclick = function() {
 window.open(this.href,'_blank');
 return false;
 }
 }
 }
 }

@mrhooOct 07.2008 — #If that doesn't work you could try something else-

[CODE]
 window.onload= function(){
 var external=[], L, a, tem;
 if(document.getElementsByClassName){
 a= document.getElementsByClassName('external');
 L= a.length;
 while(L) external.push(a[--L]);
 }
 else{
 a= document.getElementsByTagName("a");
 L= a.length;
 while(L){
 tem= a[--L];
 if(tem.className.indexOf("external")!=-1) external.push(tem);
 }
 }
 while(external.length){
 tem= external.pop();
 tem.onclick= function(e){
 e= window.event ? event.srcElement: e.target;
 window.open(e.href,'_blank');
 }
 }
 }[/CODE]

@A_WebdeveloperauthorOct 07.2008 — #Thank you.

Since they both work: which code is better?

@felgallOct 07.2008 — #Only one of them will work when [b]class="something external somethingelse"[/b] - that's the one that is better.

@mrhooOct 07.2008 — #If you are trying to find links to external sites you can do it with a

script without putting anything extra in the html-

If the href of a link is relative, or begins with your protocol and host name, it is local. Otherwise, it is not.

[CODE]window.onload= function(){
 var local, a, L, tem;
 a= document.getElementsByTagName("a");
 L= a.length;
 var local= location.href;
 local= local.substring(0, local.indexOf(location.pathname));
 while(L){
 tem= a[--L];
 url= tem.href;
 if(tem.indexOf(location.protocol)!= 0 && tem.indexOf(local)!= 0){
 tem.onclick= function(e){
 e= window.event ? event.srcElement: e.target;
 window.open(e.href, '_blank');
 }
 }
 } 

 }[/CODE]

@A_WebdeveloperauthorOct 16.2008 — #If you are trying to find links to external sites you can do it with a

script without putting anything extra in the html-

If the href of a link is relative, or begins with your protocol and host name, it is local. Otherwise, it is not.[/QUOTE]That's a very good idea, but your code didn't work (you should return false after _blank, otherwise both the old and the new tab or window will follow the link, and you used tem.indexOf instead of url.indexOf).

I've fixed the code and made it shorter:

[CODE]window.onload=function(){
 a=document.getElementsByTagName("a")
 l=a.length
 h=location.href
 h=h.substring(0,h.indexOf(location.pathname))
 while(l){
 b=a[--l]
 if(b.href.indexOf(location.protocol)!=0&&b.href.indexOf(h)!=0){
 b.onclick=function(){
 window.open(this.href,'_blank');return false
 }
 }
 }
 }[/CODE]

@A_WebdeveloperauthorOct 17.2008 — #Even shorter (and it could all be on a single line):

[CODE]window.onload=function(){a=document.getElementsByTagName("a");l=a.length;while(l){b=a[--l];
 if(b.href.indexOf("domain.com")==-1)
 {b.onclick=function(){window.open(this.href,'_blank');return false}}}}[/CODE]

(replace domain.com with the url of your site or use the code from the previous post)

@mrhooOct 18.2008 — #Or you could set the target attribute of off site links to '_blank' , and not masquerade as an xhtml strict site.

@felgallOct 18.2008 — #Or you could set the target attribute of off site links to '_blank' , and not masquerade as an xhtml strict site.[/QUOTE]

I agree. When you use JavaScript to insert invalid code in order to "fool" the validator you are only fooling yourself. The code is equally invalid either way.

@A_WebdeveloperauthorOct 18.2008 — #I agree. When you use JavaScript to insert invalid code in order to "fool" the validator you are only fooling yourself. The code is equally invalid either way.[/QUOTE]I agree, but it's still better compared to using invalid code on a strict site or using transitional, because it can now simply be made completely valid by only turning off or removing one line of Javascript.

Also the total code is shorter and removing one line of Javascript is much easier then removing all target="_blank"'s from all over a website.

I don't think that opening new windows or tabs automatically is great, but until most users know how and when to do so themselves I think this is the best solution.

@lockjs01Jun 17.2010 — #Im using a modification of the function posted by A Web Developer above in order to open all of the hyperlinks on a page in a new window.

[CODE]function openTask() {
 a=document.getElementsByTagName('a') 	//Create array
 l=a.length 								//Count values in array
 while(l){								//Loop through array
 b=a[--l] 
 b.onclick=function(){window.open(this.href,'Task','width=300,height=600');	//Open new window
 return false}						//Disable default HTML behaviour
 }
 }[/CODE]

However I need to modify this so that the function only works with a elements within a table.

Ive tried using the code:

[CODE]a=document.getElementsByTagName('table').getElementsByTagName('a')[/CODE]

but this didnt seem to work.

Any advice?

@FangJun 17.2010 — #Both are collections so you will need 2 loops

@tirnaJun 18.2010 — #

However I need to modify this so that the function only works with a elements within a table.

Ive tried using the code:

but this didnt seem to work.

Any advice?[/quote]

This code will open all the links in your web page tables in a new window.

[B]But are you sure you really want to do this?[/B]

[code=php] 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
 <script type="text/javascript">
 <!--
 
 function openLinks()  {
 var tblA = document.getElementsByTagName('table');
 var linksA = new Array();
 
  for(var i=0; i < tblA.length; i=i+1) {
   linksA = tblA[i].getElementsByTagName('a');
   for(var j=0; j < linksA.length; j=j+1) {
   window.open(linksA[j].href);
   }
 
  }
 }
 
 window.onload = function() {
 openLinks();
 }
 
 //-->
 </script>
 
 </head>
 <body>
 
 <p>
 <a href="some_url1"> my link 1</a>
 </p>
 
 <table>
 <tr>
 <td><a href="some_url2">my link 2</a></td>
 </tr>
 </table>
 
 <table>
 <tr>
 <td><a href="some_url3">my link 3</a></td>
 </tr>
 </table>
 
 </body>
 </html>
 [/code]

@tirnaJun 18.2010 — #or if you want each link to open in a new window when it is clicked maybe try this modification of my earlier posted script:

[code=php] 
 <script type="text/javascript"> 
 <!-- 
 
 //This script sets all links in tables to open in a new window when clicked
 
 function openLinks()  { 
 var tblA = document.getElementsByTagName('table'); 
 var linksA = new Array(); 
 var tempA = new Array();
 
  for(var i=0; i < tblA.length; i=i+1) { 
   tempA = tblA[i].getElementsByTagName('a'); 
   for(var j=0; j < tempA.length; j=j+1) { 
   linksA.push(tempA[j])
   } 
  } 
 
  for(var i=0; i < linksA.length; i=i+1) { 
   linksA[i].onclick = function() {
   url = this.href;
   window.open(url);
   return false;
   } 
 }
 } 
 
 window.onload = function() { 
 openLinks(); 
 } 
 
 //--> 
 </script>
 [/code]

@lockjs01Jun 18.2010 — #This code will open all the links in your web page tables in a new window.

[B]But are you sure you really want to do this?[/B]
[/QUOTE]

Thanks, I wasn't wanting to automatically open the new windows when the page loads, however I was able to modify the script to behave as I wanted: to add an onclick event to every [B]a[/B] element within the table.

[CODE]function openLinks()  { 
 var tblA = document.getElementsByTagName('table');
 var linksA = new Array();
 
  for(var i=0; i < tblA.length; i=i+1) {
   linksA = tblA[i].getElementsByTagName('a');
   for(var j=0; j < linksA.length; j=j+1) {
   b=linksA[j];
   b.onclick=function(){window.open(this.href,'Task','width=300,height=600');	//Open new window
   return false}
   }
  }
 }
 window.onload = function() {openLinks();}[/CODE]

@lockjs01Jun 18.2010 — #or if you want each link to open in a new window when it is clicked maybe try this modification of my earlier posted script:
[/QUOTE]

I didn't see this post before posting my reply, thanks.

@tirnaJun 18.2010 — #no problem ?

it's only after I had a closer look at your original code that I realised you didn't want the links to open automatically, so I thought I better post the additional code that does what you wanted.

@lockjs01Nov 18.2010 — #Hello,

Im trying to update the site I originally modified this code for so that the function will only affect links within a table which has a specific ID,

This is my modified code:

[CODE]function openTasks()  { 
 var tblA = document.getElementById('taskgrid');
 var linksA = new Array();
 
  linksA = tblA.getElementsByTagName('a');
   for(var j=0; j < linksA.length; j=j+1) {
   link=linksA[j];
   link.onclick=function(){window.open(this.href,'Task','width=310,height=600,scrollbars=1');	//Open new window
   return false}
   }
 }
 [/CODE]

However it doesn't appear to be working, could anyone advise me on how to resolve this?

@SpoiledTechieFeb 18.2011 — #I need a certain image class named "travel" to do a rollOver change.

I can get the rollOver to work, but it applies to all of the images on the page.

(there is also some code in there for when I click on those rollOver images that works properly as is)

(the images that show up when I click are in an array)

what I have now is:

window.onload = init;

function init() {

 for(var i = 0; i < document.images.length; i++) {
   setupRollover(document.images[i]);
  }

function setupRollover(theImage) {

var overImage = new Image();
  overImage.src = "images/" + theImage.id + "_on.png";
  var outImage = new Image();
  outImage.src = theImage.src;  // The default image is the image to show on mouseout
  var clickImage = new Image();
  clickImage.src = "images/" + theImage.id + ".png";
 
  // additional image properties
  theImage.overImage = overImage;
  theImage.outImage = outImage;
  theImage.clickImage = clickImage;
 
  // event handlers
 
  theImage.onmouseover = function() {
   this.src = this.overImage.src;
  }
 
  theImage.onmouseout = function() {
   this.src = this.outImage.src;
  }
  theImage.onclick = function(){
   document.getElementById("targetImage").src = this.clickImage.src;
 
 
   return false;
  }

}

as it stands, everything works perfectly except that the images that are NOT supposed to roll over are affected by the roll over. I ONLY want the images with the class "travel" to be affected by the roll over.

help plz!

Also in #JavaScript _↴

Saving very long cookies Multilevel Menu Assistance javascript form validation

Success!

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

Tweet This

getElementsByClassName in Internet Explorer

20 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

getElementsByClassName in Internet Explorer

20 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

20 Comments(s) _↴

Also in #JavaScript _↴