Use jQuery to Open “External” URLs in a New Browser Window

Published 15 September 10 03:24 AM | Scott Mitchell

As any web developer knows, the HTML anchor element (<a>), when used in the following form:

<a href="http://www.scottonwriting.net">Click Me!</a>

creates a hyperlink with the text “Click Me!” that, when clicked, whisks the user to the specified href value, in this case my blog, ScottOnWriting.NET. By default, clicking a link opens the specified URL in the user’s existing browser window; however, using the <a> tag’s target attribute it is possible to open the URL in a new window. Adding target=”_blank” to the <a> element will cause the browser to open the link in a new browser window:

<a target="_blank" href="http://www.scottonwriting.net">Click Me!</a>

Some websites like to have all links to “external” web pages open in a new browser window, while having “internal” links open in the same browser window. I use the words external and internal in quotes here because their definitions can depend on the website. Some websites would consider URL that specifies a hostname in the href to be “external” – such as http://www.4guysfromrolla.com/ScottMitchell – while URLs that lack a hostname would be “internal” – such as /sowblog/archive/2010/09.aspx. Other websites might want links to partner websites to still be considered “internal,” even though they include a hostname.

I recently worked on a project where the client wanted this kind of behavior. He had hundreds of existing web pages, each with dozens of links, all of which lacked a target attribute. He didn’t want to have to go through the pages and links, one at a time, adding the target attribute where needed. To help address this problem I wrote a very simple jQuery plugin that can be used to automatically add a target attribute to “external” URLs.

WARNING: I know just enough JavaScript and jQuery to be dangerous, so please don’t presume my plugin is in any way an example of best practices. In fact, if you have any feedback or suggestions on how to improve it, please let me know in the comments!

The plugin defines a single function, UrlTarget([whiteList], [targetName]). The following line of code (which you’d place in $(document).ready, presumably) will add a target=”_blank” attribute to all “external” links. Without specifying a whiteList, all URLs that start with http:// or https:// are considered external, whereas all that don’t are considered internal:

$("a").UrlTarget();

If you want certain hostnames to be considered “internal,” simply specify one or more regular expressions in an array as the whiteList. If the hostname for a hyperlink matches on any of the regular expressions then it is considered “internal” and the target attribute is not added. For instance, to have all URLs that point to 4GuysFromRolla.com or ScottOnWriting.NET considered “internal,” you’d specify the following whiteList value:

$("a").UrlTarget([
    '^(www\.)?4guysfromrolla\.com$',
    '^(www\.)?scottonwriting\.net$'
]);

If you specify a targetName value, the target attribute added to external URLs is assigned that targetName. If this input parameter is omitted then the target value “_blank” is used. Also, note that if a hyperlink with an external URL already has its target attribute set then it is not overwritten by UrlTarget. Likewise, if a hyperlink with an internal URL has a target attribute set, it is not removed.

To use my plugin you’ll need to download the script at http://scottonwriting.net/sowblog/CodeProjectFiles/urlTarget.js, save it to your website, and then reference it via a <script> tag. I’ve got a demo online available at http://scottonwriting.net/sowblog/CodeProjectFiles/JQueryLinksDemo.htm, which has the following JavaScript:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="urlTarget.js"></script>

<script type="text/javascript">
        $(document).ready(function() {
            $("a").UrlTarget([
                '^(www\.)?4guysfromrolla\.com$',
                '^(www\.)?scottonwriting\.net$'
            ]);
        });
</script>

Note that both the jQuery and urlTarget.js libraries must be referenced.

Happy Programming!

Filed under:

Comments

No Comments

Archives

My Books

  • Teach Yourself ASP.NET 4 in 24 Hours
  • Teach Yourself ASP.NET 3.5 in 24 Hours
  • Teach Yourself ASP.NET 2.0 in 24 Hours
  • ASP.NET Data Web Controls Kick Start
  • ASP.NET: Tips, Tutorials, and Code
  • Designing Active Server Pages
  • Teach Yourself Active Server Pages 3.0 in 21 Days

I am a Microsoft MVP for ASP.NET.

I am an ASPInsider.