How to create a warning when opening external links in jQuery Posted on

WARNING : This post contains an obscene amount of sarcasm.

Working in a regulated industry has it’s complications, and some of these are created by over-zealous compliance teams who assume that every web visitor has the IQ of a peanut.

Let’s face it, visitors on the web know when they click a link to another site that the original site they were looking at has no authority over the content shown on the new site, right? It’s one of the quickest things you’ll probably learn when browsing the web, yet some compliance teams think otherwise and will insist you warn your visitors when clicking an external link. Yay for them!

If you hit this snag, the following code should do everything you need. It’ll automagically check every link on your site to see if it links to an external site or your own. If it’s an external link, it’ll fire off a pop-up confirmation box that shows the warning, and has an “ok” or “cancel” button. If the user hits “ok”, it’ll redirect them to the site they wanted to visit in the first place. If they hit cancel, it’ll keep them on the page. Simples.

If you’re not proficient with javascript or jQuery, your web developer should make perfect sense of this :

$(document).ready(function(){

var root = new RegExp(location.host);

$('a').each(function(){

    if(root.test($(this).attr('href'))){ 
        $(this).addClass('local');
    }
    else{
        // a link that does not contain the current host
        var url = $(this).attr('href');
        if(url.length > 1)
        {
            $(this).addClass('external');
        }
    }
});

$('a.external').live('click', function(e){

    e.preventDefault();
    var answer = confirm("You are about to leave the website of [COMPANY NAME] and view the content of an external website. [COMPANY NAME] cannot be held responsible for the content of external websites.");

    if (answer){
        window.location = $(this).attr('href');
    } 

});

});

Now your compliance team can sleep happy at night knowing that if a peanut visits your site, they’ll know whether it’s your site or another they’re looking at! Phew!

If you need a hand installing this on your own site, shout!

This entry was posted in Resources. Bookmark the permalink.


  • Roy Woodthorpe

    Excellent script and blog post. Is there any way to make these external links open in a new window? It seems to override my target=”_blank”.

    Thanks Roy.

    • codepotato

      Apologies Roy, Disqus hadn’t sent me your comment left on this post and i’ve only just seen it!

      You can indeed force it to open the links in a new window, and in the code above you would change the window.location = to window.open

      Hope that helps!

  • nosliwtrauts

    Funny post! Of all the industries you could have picked to specialise in, you pick the one that is blessed with more mind-numbing regulation than you can shake a weary stick at (-:

    I guess a compliance officer would argue that a link suggests an endorsement or at the very least that this other site has something interesting and relevant to say, hence the paranoia. Also if links open in the same window you might not notice you had left the original site (if you were a rather stupid peanut).

    It’s all nonsense of course, but that’s Financial Services for ya!

  • EM

    Wow. Too funny. And exactly what I’ve been searching for! Especially being that I work on websites for the pharma industry. They’re particularly sensitive with this kind of legal stuff! Thanks so much for the nice code!