.NET slave Mads Kristensen wrote a nice post on how to identify external links using JavaScript a few days ago, over on his blog. I had been meaning to implement something similar here, and his post gave me the much needed nudge in the rigth direction – as you can see from the nice little icon next to the link to his post – but this link, which is local, does not have it. Awesome 🙂

I decided to take the idea a bit further than simply embedding a javascript into my pages, and implemented it as an ASP.NET Ajax ControlExtender instead. The control, which I’ve called ExternalHyperLinkExtender, has the following properties to configure it:

ExternalLinkCssClass
Lets you specify the CSS class that should be applied to external links. Typically, this will be a class that looks something like this:

.ExternalLink 
{
background: url(Icons/ExternalLinkIcon.png) right top no-repeat;
padding-right: 9px;
}

LocalHyperLinkRegex
Lets you specify a regular expression pattern that the extender will then use to identify local links – any link that does not match the pattern will get the ExternalLinkCssClass applied to it. If you do not specify this property, the extender will attempt to determine if the link is external by doing a string compare with the path of the document it is on instead (much like Mads original script does).

AddTargetIfNotSet
If you set this to true, the extender will set the target attribute of the hyperlink to ‘_blank’, if it has not already been set.

A usage example then, would look something like this (taken from the code that renders the very text you are reading now):

<asp:Label
    ID="_text"
    runat="server"
    Text='<%# Eval("Text") %>' />
<iridescence:ExternalHyperLinkExtender
    ID="_textExtender"
    runat="server"
    AddTargetIfNotSet="true"
    LocalHyperLinkRegex="^http://blog\.iridescence\.no"
    ExternalLinkCssClass="ExternalLink"
    TargetControlID="_text" />

I wont go into the details of how to write an ASP.NET Ajax ControlExtender – you’ll find a good walkthrough covering that over at the official ASP.NET site, but below is the javascript code that is the heart of the extender:

initialize : function() 
{
Iridescence.Ajax.ExternalHyperLinkBehavior.callBaseMethod(this, 'initialize');
// get the element we're extending
    var element = this.get_element();
// get all the anchors that are children of the element
    var links = element.getElementsByTagName('a');
for(var index in links)
{
// for each anchor, find any that link off-site
        var link = links;     
if(link.href && link.innerHTML && link.innerHTML.length > 0)
{       
var externalLinkFound = false;
if(this._LocalHyperLinkRegex != null && this._LocalHyperLinkRegex.length > 0)
{            
// use regex to test
                var regex = new RegExp(this._LocalHyperLinkRegex);                
externalLinkFound = !link.href.match(regex);                
}
else            
{
// do a simple string comparison to test
                externalLinkFound = !link.href.startsWith(document.location.href.substring(0, 13));
}
// if we found an external link...
            if(externalLinkFound)
{
if(this._AddTargetIfNotSet && !link.target)
{
// ...set target 
                    link.target = '_blank';     
}
if(this._ExternalLinkCssClass)
{
// ...add css class
                    link.className += " " + this._ExternalLinkCssClass;
}
}                                
}
}   
}

Finally, I’ll leave you with this little nugget of sexyness: When all the major browsers (come on, IE team!) gets CSS3 support, we could solve this in a much more elegant way by using the CSS3 Selectors, as described in this post. Now that looks awesome 🙂

Update 17/6 2007

So I finally got around to fixing the bug that prevented this from working in IE6 – basically IE6 always returned ‘undefined’ for link.text, causing my script to skip all links. I’ve changed it to link.innerHTML now 🙂