LinkChecker icon indicating copy to clipboard operation
LinkChecker copied to clipboard

A handy bookmarklet and JS library to check a page for broken links

#LinkChecker#

LinkChecker is a simple, lightweight JavaScript framework that assists in checking for broken links.

##Core Types##

###LinkChecker.Link###

The Link type is used to check an individual url. Construct a Link type by passing in a DOM element that is either an anchor or an image (beware that this is not enforced in code):

//assume HTML:
//<a href="/some/local/link" id="someElement">Link Text</a>
var someLink = new LinkChecker.Link(document.getElementById("someElement"));

Call the isLocal() method to check whether checking the link will violate the same-origin policy. This is a safety measure that is a necessity unless you have disabled the same-origin policy in your browser.

if(someLink.isLocal()) {
    //do something
}

Assuming our link was local, check whether its broken. In the callback, this is bound to the link object and the broken property stores the result of the check:

//supply callback for when request has completed
//within the callback, 'this' is bound to the Link object
link.check(function() {
    console.log("Checked URI '%s' on element with ID '%s'. Is broken: %s", " this.uri, this.elem.id, this.broken);

});

###LinkChecker.LinkProcessor###

The LinkProcessor type is used to batch process links. URLs will only be checked once if the URL exists in more than one location in a document

To construct a LinkProcessor supply an array of relevant DOM elements:

//we will check every link in the document
var processor = new LinkChecker.LinkProcessor(document.getElementsByTagName("a"));

LinkProcessor uses a pub/sub system to give plenty of flexibilty in how you wish to use it. The events exposed by LinkProcessor can be found in LinkChecker.events object. Use the on(string, function) method to subscribe to an event.

The started event is fired immediately before processing begins:

processor.on(LinkChecker.events.started, function(numberOfLinks) {

    //callback is supplied with number of links to be processed
    //filtered by those which do not violate same-origin policy (a subset of the links passed into constructor)
    console.log("beginning processing of %i links", numberOfLinks);

});

The checked event is called after each link has been checked:

processor.on(LinkChecker.events.checked, function(link) {

    //callback is supplied with a primed link object
    console.log("checked uri: '%s', is broken: %s", " link.uri, link.broken); //checked uri: '/some/local/link', is broken: false

});

The completed event is supplied with an array of all processed Links:

processor.on(LinkChecker.events.completed, function(processed) {
    var count = 0;

    //tally up broken links
    for(var i = 0; i < processed.length; i++) {
        if(processed[i].broken) {
            count++;
        }
    }

    //output a summary
    console.log("completed processing, found %i broken links", count);
});

##LinkChecker.UI##

LinkChecker.UI is an sample (but fully functional!) application of the LinkChecker types. It provides a UI with progress bar, highlighting links as it checks them, and reporting on broken links when checking is complete. Just include LinkChecker.UI.js, along with the LinkChecker.js, on any web page to see it in action.

###Bookmarklet###

The easiest way to utilise the LinkChecker.UI functionality is to create a bookmarklet from the code contained inLinkChecker.Bookmarklet.js. If you do this, checking links on any web page is a breeze! As it is, the bookmarklet hotlinks the latest code on GitHub, so please modify if you wish to stick to a specific version.