Quick: Dynamically Open External Links in a New Window

Derek Land — Thu, 11 Feb 2010 14:58:21 +0000

Since I began writing HTML ten years ago, I hated using target=“blank” in my markup. Coupled with the fact that if you’re using a strict DOCTYPE the target method is invalid anyway, I began looking for an easy way to open only external links in a new window (and I realize there are pros and cons of doing this). Using this jQuery technique, each link is tested to check if it’s local or not, or alternatively in the second method only opening links in a new window if they are children of a given element.

*Do make sure you import the jQuery library or else you’ll be left wondering why neither of these methods work.

Method #1: All External Links

Opens all external links in a new browser window
Using this method, jQuery checks all link references to see if they are heading off to a local page (eg: hosted on the same domain) or if they are being sent on their merry way somewhere else.

To use this salubrious tidbit, find the script block on your page, and paste in the follow snippet:

jQuery("a[href^='http:']").not("[href*='whatevs.com']").attr('target','_blank');

Make a note of the part that says “whatevs.om” and swap it out with your domain – thisisinspired.com or bing.com, (or .org, .net, .us, etc) for example.

This piece of jQuery will catch all anchor clicks and attach the behaviour otherwise achieved by target=“_blank”.

But what if you just need to open all the links in a certain area of a page in a new window? This may be useful in particular if you wish all links to open in the same except for those links that carry footnotes or references and are used in the midst of a lengthy article. In such cases, it might be to your audience’s best interests to open just those in a new window so they don’t lose their place. In this case, method #2 works best.

Method #2: Only Specific Children Links

Open links in a new window only if they are children of a given section.
This is very, very similar to the one above, except that it doesn’t just batch all anchors together based on what domain they reference – it catches only the anchors within a certain element and opens them all in a new window.

Copy this snippet into the script area of your page:

jQuery("a[href^='http:']").attr('target','_blank');

…and note the ...$(“a[href... area. Insert the ID or class of the parent element directly before the “a”, like so:

jQuery("#content a[href^='http:']").attr('target','_blank');

where #content is the ID name of the element whose anchors we want opened in a new window. For WordPress users, you might change this to .post to select all anchors within only the post itself.

Thanks for reading This Is Inspired! Catch more inspiration online at ThisIsInspired.com and share comments and feedback.

ThisIsInspired Magazine » anchor tags

Quick: Dynamically Open External Links in a New Window

Method #1: All External Links

Method #2: Only Specific Children Links