Opening External Links in a New Window Using jQuery

In this article we’ll discuss working with external links and the semantically correct user‐friendly developer‐friendly way to get them to open in a new window or tab using the jQuery library and a small jQuery script. Additionally we’ll review how to implement this in a WordPress installation. Linking to external… (Continues below.)

In this article we’ll discuss working with external links and the semantically correct, user‐friendly, developer‐friendly way to get them to open in a new window or tab using the jQuery library and a small jQuery script. Additionally, we’ll review how to implement this in a WordPress installation.

Linking to external resources/documents is a the very idea behind the internet and bread and butter of search engines everywhere. However, handling external links (that open in a new window/tab) in a user‐friendly way can be somewhat of a pain.

Recently, I’ve been looking for a developer‐friendly (read: “easy”) way to handle external links on this site as I tend to reference external resources quite a bit in posts and articles. In the old days, you could specify where an external link would open by placing the target="_blank" attribute within the link like so:

<a href="document_url" target="_blank">This is an external link</a>

However, with the removal of the target= attribute in HTML 4.0, this is no longer valid markup. As Kevin Yank from from Sitepoint states:

The HTML 4.0 specification took away the target attribute, but it added another attribute: rel. This attribute is intended to specify the relationship between the document that contains the link, and the target of the link. The specification defines a bunch of standard values for this attribute (e.g. next, previous, chapter, section), most of which have to do with relationships between small sections of a larger document. However, the spec leaves the developer free to use nonstandard values for site‐specific purposes.

To stay standards‐compliant (because that’s what good web developers do, right?) we can now markup external links using the rel attribute link so:

<a href="document_url" rel="external">This is an external link</a>

That’s all fine and well, but what if you’re lazy busy? And you either forget to mark your external links with rel="external", or you’re updating an old site that you’ve converted to XHTML Strict? What’s more, how do you go about alerting your visitors that the link they’re about to click on will open in a new window? (Because that is the polite—and user‐friendly—thing to do). Fortunately with jQuery it’s easy!

First and foremost, the best way to handle external links is to write them properly from the beginning. This means marking them up with the rel="external" attribute and including a title attribute with an alert that the link will open in a new tab/window. In reality this doesn’t happen all the time, so we can use jQuery to handle some of this for us.

Solutions…and Issues

First Solution

The first solution I came across used jQuery to find external links with the rel="external" attribute and add a target="_blank" attribute to each one. There are a few issues with this solution:

  1. It relies on the author to remember to add rel="external" to each external link
  2. It adds a target="_blank" to each link, which is no longer standards‐compliant.
  3. It relies on the author to remember to add a title attribute with an alert about a new window opening.
  4. It broke if the rel attribute had more than one value, such as rel="external nofollow"

Second Solution

The second solution I came across fixed some of the issues of the first by re‐writing the regex to account for additional values in rel attributes and no longer adding target="_blank" attribute to the external links. Further, it removed the need for rel="external" all together by matching all links that started with “http://”, under the assumption all internal links use relative paths and external links use absolute paths like so:

There are still a few issues with this solution:

  1. Assuming only external links have absolute urls can become problematic. (CMS’ such has WordPress generate absolute urls for internal links within a site.)
  2. You’re still relying on the author to include a title attribute alerting the visitor of a new window opening.

Third Solution

Yet another solution approached from a different angle and basically adds a target="_blank" attribute to all links that do not start with the site’s own domain name, nor point to an internal anchor with an href value of “#”.

The issues with this solution are the same as the prior two; relying on the author for the title attribute, and utilizing the target attribute. Additionally, it also adds the additional step of requiring the author to change the script to add his/her own domain name. Testing it, I found it broke if you typed “www.domainname.com” in your script, but not “domainname.com” in your link; or vice‐versa.

Ultimately I was looking for the most developer‐friendly, standards‐compliant, user‐friendly way to handle these external links. On the next page we’ll review the solution I came up with.

Continues…

Pages: 1 2 3