www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: getElementsByClassName in Internet Explorer

  1. #1
    Join Date
    Oct 2008
    Posts
    14

    Exclamation getElementsByClassName in Internet Explorer

    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="http://webdeveloper.com/" class="external">...</a>
    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;
      }
    }
    How can I get this to work in Internet Explorer too?
    Or which other function can do what I want in Internet Explorer?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654

  3. #3
    Join Date
    Oct 2008
    Posts
    14

    Arrow getElementsByClassName in Internet Explorer

    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:
    Code:
    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:
    Code:
    window.onload = function() {
      if (document.getElementsByClassName) {
        external = document.getElementsByClassName('external');
        for (var i = 0; i < 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;
          }
        }
      }
    }
    Last edited by A Webdeveloper; 10-06-2008 at 06:11 PM.

  4. #4
    Join Date
    Feb 2006
    Posts
    2,927
    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');
            }
        }
    }
    Last edited by mrhoo; 10-07-2008 at 01:39 AM.

  5. #5
    Join Date
    Oct 2008
    Posts
    14
    Thank you.
    Since they both work: which code is better?

  6. #6
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Only one of them will work when class="something external somethingelse" - that's the one that is better.

  7. #7
    Join Date
    Feb 2006
    Posts
    2,927
    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');
                }
            }
        }  
    }

  8. #8
    Join Date
    Oct 2008
    Posts
    14

    Thumbs up

    Quote Originally Posted by mrhoo View Post
    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.
    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
          }
        }
      }
    }

  9. #9
    Join Date
    Oct 2008
    Posts
    14

    Smile

    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}}}}
    (replace domain.com with the url of your site or use the code from the previous post)

  10. #10
    Join Date
    Feb 2006
    Posts
    2,927
    Or you could set the target attribute of off site links to '_blank' , and not masquerade as an xhtml strict site.

  11. #11
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Quote Originally Posted by mrhoo View Post
    Or you could set the target attribute of off site links to '_blank' , and not masquerade as an xhtml strict site.
    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.
    Last edited by felgall; 10-17-2008 at 11:45 PM.

  12. #12
    Join Date
    Oct 2008
    Posts
    14

    Lightbulb

    Quote Originally Posted by felgall View Post
    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.
    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.

  13. #13
    Join Date
    Jun 2010
    Location
    Leeds, England
    Posts
    8
    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
      	}
    }
    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')
    but this didnt seem to work.

    Any advice?

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Both are collections so you will need 2 loops

  15. #15
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by lockjs01 View Post

    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?
    This code will open all the links in your web page tables in a new window.

    But are you sure you really want to do this?

    PHP Code:
    <!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=0tblA.lengthi=i+1) {
            
    linksA tblA[i].getElementsByTagName('a');
            for(var 
    j=0linksA.lengthj=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> 
    Last edited by tirna; 06-17-2010 at 11:29 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles