In part 1, we added some nifty icons to external links. However, because we only compared the anchor’s server name to the local server name, bad links still look good. By using Simon Willison’s json-head application, we can add file size calculations like our internal links and display a “file not found” message for bad links. The only thing we can’t see are external links that require authentication (the reason we duplicated the json-head logic in AJAX to begin with).

Let’s turn this:

Into this…

We’ll extend our second function from part 2 to include scenarios for external links:

<script type="text/javascript">
function hdrDetails(i, elm, cl) {
        cl = cl/1024;
    var sz = cl>1024?"MB":"KB";
        cl = cl>1024?cl/1024:cl;
    var len = $(elm).eq(i).text().length;
    if(len > 0) {
        $(elm).eq(i).after("<span> ("+cl.toFixed(2)+" "+sz+")</span>");
    }
}
$(function() {
    var elm="a[href$='.pdf'],"+
            "a[href$='.doc'],"+
            "a[href$='.ppt'],"+
            "a[href$='.xls'],"+
            "a[href$='.docx'],"+
            "a[href$='.pptx'],"+
            "a[href$='.xlsx']";
    $(elm).each(function(i, e) {
        if (e.hostname && e.hostname == location.hostname) {
            $.ajax({
                type: "HEAD",
                url: $(this).attr("href"),
                complete: function(xhr, textStatus) {
                    var cl=xhr.getResponseHeader("content-length");
                    if(textStatus=="success") {
                        var cl=xhr.getResponseHeader("content-length");
                        hdrDetails(i, elm, cl);
                    }else{
                        $(elm).eq(i).after("<span> (file not found)</span>");
                    }
                }
            });
        }
        if (e.hostname && e.hostname !== location.hostname) { //external link
            //add the icon
            $(this).after(' <img src="/PaulGrenier/images1/external.png" alt="external link">');
            //call json-head
            var url= "http://json-head.appspot.com/?url="+encodeURI($(this).attr('href'))+"&callback=?";
            $.getJSON(url, function(json){
                if(json.ok && json.headers["Content-Length"] && json.status_code == 200) {
                    var cl = json.headers["Content-Length"];
                    hdrDetails(i, elm, cl); //run the calculations and insert a file size
                }
                if(json.ok && json.status_code == 404) { //file not found error
                    $(elm).eq(i).after("<span> (file not found)</span>");
                }
            });
        }
    });
});
</script>

If you have ideas for extending this further, please leave a comment.

Paul Grenier