DOM Scripting External Links

Here’s the JavaScript:

function externalLinks() {
  var domainList = new Array("andycouch.com", "google.com");  // Your domain(s).
  // Links to anything on these domains are considered internal.
  // Enclose each domain in quotes, separated by a comma.  (e.g. "domain1", "domain2")
  // You do not need to list sub-domains.  This function already assumes all sub-domains
  // are internal.

  // Open external links in a new window?  true = yes, false = no
  var newWindow = true;

  // Add a special class to external links?  true = yes, false = no
  var addClass = true;
  // Class name for external links.
  var extClass = "external";

  // Add a warning dialog to external links?  true = yes, false = no
  var addWarning = true;
  // Text for warning dialog.
  var warning = "You are about to leave my site.";

  if (!document.getElementsByTagName) return false;
  var anchorList = document.getElementsByTagName("a");
  var protocolStart = "^http[s]?:\/\/";
  var protocol = new RegExp(protocolStart, "i");
  var domains = "";
  for (var i=0; i < domainList.length; i++) {
    domains += "(" + domainList[i] + ")";
    if (i < (domainList.length - 1)) {
      domains += "|";
    }
  }
  var mySites = new RegExp(protocolStart + "([a-z0-9-\.]*\.)?" + domains, "i");

  for (var i=0; i < anchorList.length; i++) {
    if (anchorList[i].href.match(protocol) && !anchorList[i].href.match(mySites)) {
      if (newWindow) anchorList[i].setAttribute("target", "_blank");
      if (addClass) anchorList[i].className=extClass;
      if (addWarning) anchorList[i].onclick=function() {
        var leave = window.confirm(warning);
        return leave;
      }
    }
  }
}
window.onload=externalLinks;

Here’s some extra CSS:

a.external {
  padding-right: 17px;
  background: url("/images/icon_globe.png") right center no-repeat;
}

I’ll add some more text to this entry eventually.

Leave a Reply

Your email address will not be published. Required fields are marked *