«
»

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.

Category: Hacking, JavaScript | Tags: , | Comments: 13
Print | Syndicate | Trackback | Respond

13 Responses to “jQuery External Link Plugin”

  1. Xsss4hell says:
    April 22nd, 2007 at 15:40 |

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

  2. Ralf S. Engelschall says:
    April 22nd, 2007 at 18:30 |

    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:
    February 4th, 2008 at 21:14 |

    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:
    February 4th, 2008 at 21:37 |

    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:
    February 5th, 2008 at 16:25 |

    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:
    February 5th, 2008 at 16:27 |

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

  7. Ralf S. Engelschall says:
    February 5th, 2008 at 16:53 |

    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:
    February 5th, 2008 at 20:16 |

    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:
    September 4th, 2008 at 14:22 |

    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:
    October 24th, 2008 at 3:38 |

    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:
    October 25th, 2008 at 9:21 |

    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:
    November 16th, 2008 at 3:22 |

    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:
    November 17th, 2008 at 7:43 |

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

Leave a Reply