jQuery External Link Plugin

April 1st, 2007 by Ralf S. Engelschall

On the net one sometimes see web pages where hyperlinks to external URLs are visually marked with an additional icon placed at the end of the hyperlink. I found this always a neat effect and hence have created such a simple icon myself in a few colors and coded a very
small jQuery plugin jquery.extlink.js which allows me to automatically add such an icon to all web pages. Find this jQuery plugin in the File Repository area.

14 Responses to “jQuery External Link Plugin”

  1. Xsss4hell says:

    Howto download the code for extlink plugin?
    I have not any access to the file-repository.

  2. Ralf S. Engelschall says:

    Follow the link “File Repository” in the article and you reach the file respository. There you see the jquery.extlinks.js file. Click to the latest version number (second column, just right to the file name) and you see the content. For downloading click on the link “raw” in the upper right hand corner. Well, or just access it directly here

  3. Pierre says:

    Hello Mr Engelschall,

    I tried your script on my server but I get the following error. What would you recommand?

    $(this).attr(“href”) has no properties
    http://website/js/jquery.extlink.js
    Line 18

  4. Ralf S. Engelschall says:

    Pierre: You have a without a “href” attribute, I guess. My fault in not checking for this special case. Now fixed in the latest version of the plugin.

  5. Pierre says:

    Mr Engelschall,

    thank you very much for your quick reply. I have applied your fix to my script and it almost works fine. I say almost because I’m stuck with a very strange issue. The script adds the extlink image to every local link. Not the external ones.

    What am I doing wrong again? :P

  6. Pierre says:

    Actually, my bad. It seems to add it to every link, period. Local or external.

  7. Ralf S. Engelschall says:

    Pierre: Err, no: it really should add the link only to the external links. i.e., those anchor tags which have a href attribute with a content of an absolute URL. I’ll check the script again…

  8. Ralf S. Engelschall says:

    Pierre: Ok, I’ve once again revised the jQuery plugin and now it should match more precisely. Please fetch the latest version and also its jquery.extlinks.html example file.

  9. Jeremy Knab says:

    Ralf, thanks for the more advanced external link jquery script!
    I made a nice one in MooTools but, due to some new projects, I have been using jQuery for a little while and needed something better than the one I put together in jQuery as it was flagging anything with http:// as external.

    I’ve taken your script and modified it for my use. What I normally do with external links is add/modify the title attribute and add a CSS class.

    (function($) {
    $.fn.extend({
    extlink: function () {
    var site = String(document.location)
    .replace(/^(https?:\/\/[^:\/]+).*$/, "$1")
    .replace(/^((site)?(file:\/\/.+\/))[^\/]+$/, "$3")
    .replace(/(\\.)/g, "\\$1");
    $("a", this).filter(function (i) {
    var href = $(this).attr("href");
    if (href == null)
    return false;
    return (
    href.match(RegExp("^("+site+"|(https?:)?/[^/])")) == null
    && href.match(RegExp("^(https?|ftp)://.+")) != null
    );
    }).each(function () {
    if ($(this).attr('title').length == 0) {
    $(this).attr('title', $(this).html());
    }
    $(this)
    .attr('title', $(this).attr('title')+' (opens in new window)');
    .addClass('ext').attr('target', '_blank');
    });
    }
    });
    })(jQuery);

    Once again, many thanks for the time saving script!

  10. Trevor says:

    When I’m on http://localhost and link to https://localhost, it treats it as an external link. Is this the desired behavior? If so, how can I treat it so it is not?

    Thank you.

  11. Ralf S. Engelschall says:

    Trevor: Oh, ok, I see. I’ve now tried to improve the jQuery ExtLink plugin and it now should match more precisely and also support the localhost scenario.

  12. Trevor says:

    Ralf, Thank you for the update. Unfortunately I still can’t get it to work. It is still treating https as external links when I’m on the http version. I have been trying to edit your code to fix it. What else could I try?

    Thank you.

  13. Trevor says:

    Ralf: My mistake. It is working. Although I believe ‘hostname’ should be ‘host_name’ on line 33. Thank you for your help. Sincerely.

  14. Raman says:

    Ralf, How do I register to be able to access the code in the jQuery directory? It requires a login, but I can’t find a Register link. Pl help. Thank you.

Leave a Reply