Skip to content

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

Notifications You must be signed in to change notification settings

WickyNilliams/LinkChecker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#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.

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published