« Blog Home

§ External links to new windows

Ok, there's lots of REALLY HEATED discussions about this topic all over the web.  I'm not looking for arguments; I'm just posting what I do here in this blog.

This all came about from running a validator.  I don't particularly care about validation, but they are nice for finding broken HTML.  Anyway, if you didn't know, the target attribute currently doesn't validate for strict doctypes, but is proposed to be valid again for HTML5.  Whatever.

Since some people seem really emotionally invested in this issue, I thought I'd set up a compromise which lets me have my blog and you can eat it, too.  Oh... sorry.  Since this blog is really just for my benefit, I want it to handle links the way I want; namely, pages on other domains open in a new window.  I also want my example pages to be in new windows.

On page load this grabs all the links and tries to decide if they go to another domain; I think the my externalDomain function works.  I tried to find code that took care of it, but what I did find either didn't seem to work or worked but threw errors on some (ahem) browsers.  Anyway, if it decides a link is external, it adds a classname ('extlink').  If I want a link to open a new window anyway, I manually add the classname to the link.  An image, target, and title are added to the links that have that classname.  Then forms on the page are checked and altered similarly.

I added the image after the submit buttons this way because it looks like input elements have to be a child of a block element to validate, so you can't necessarily just add it to the form.

 


var mydomain;
function externalUrls2NewWindow() {
  mydomain = document.domain;
  var mytarget = "_blank";
  var mytitle = "Opens in new window";
  var imgel = document.createElement('img');
  imgel.src='images/external.png';
  imgel.alt=mytitle;
  imgel.className='extlink';

  var links = document.getElementsByTagName("a");
  for(var i=0;i<links.length;i++) {
    if(externalDomain(links[i].href)) {
      if(links[i].className.indexOf("newwinlink") == -1) {
        links[i].className += " newwinlink";
      }
    }
    if(links[i].className.indexOf("newwinlink")>-1) {
      links[i].appendChild(imgel.cloneNode(true));
      links[i].target = mytarget;
      links[i].title = mytitle;
    }
  }
  var forms = document.getElementsByTagName("form");
  for(var i=0;i<forms.length;i++) {
    if(externalDomain(forms[i].action)) {
      for(var k=0;k<forms[i].elements.length;k++) {
        if(forms[i].elements[k].type == "submit") {
          forms[i].elements[k].parentNode.appendChild(imgel.cloneNode(true));
        }
      }
      forms[i].target = mytarget;
      forms[i].title = mytitle;
    }
  }
}
function externalDomain(url) {
  var urlparts = url.split("://");
  if(urlparts.length>1) {
    urlparts = urlparts[1].split("/");
    if(urlparts.length>0 && urlparts[0] != mydomain) {
      return true;
    }
  }
  return false;
}
function makeDoubleDelegate(function1, function2) {
  return function() {
    if (function1)
      function1();
    if (function2)
      function2();
  }
}
window.onload = makeDoubleDelegate(window.onload, externalUrls2NewWindow);
 


 

last edited on February 16th, 2009 at 6:48 PM

Comments

No Comments Here. Add yours below!

Add your comment

Name:
Email: (Will not be displayed - Privacy policy)
Website:
Comments:
  random image I can't read it!
Give me a different one!
Verify Post: Input the text from the image above to verify this post (helps prevent spam)
 

« Blog Home


“Elli Qu- a friend of mine used to say, ‘Aim high.  You may miss the target but at least you won’t shoot your foot off.’”
Miles, Komarr, Lois McMaster Bujold