Opening External Links in a New Window Using jQuery
…continued from previous page.
Initially I got the idea for this script from this script on Liviu Holhos’ blog. The script explains a way to add an image next to all external links on a site using the external site’s favicon. I figured if there were a way to add a favicon, there must be a way to automatically add the target="_blank" attribute to all external links. In my research, I discovered the 3 previously mentioned scripts but discovered the issues with each, so I decided to write a script from scratch.
The Code
First let’s get the script in here so we can see what we’re working with.
$(document).ready(function() {
$('a[href^="http://"]').filter(function(){
return this.hostname && this.hostname !== location.hostname; })
.addClass("external")
.attr({ title: "Link will open in new window" })
.click( function() {
window.open(this.href);
return false;
});
});
Now let’s break the code down and see what’s going on line by line.
In the first line, we’re telling jQuery not to load the script until the DOM is loaded, but before any page content is loaded:
$(document).ready(function() {
// the rest of the script goes in here
});
In the second line, we’re telling the script to find all links that begin with “http://”…
$('a[href^="http://"]').filter(function(){
…and filter out links that have the same hostname as the current page:
return this.hostname && this.hostname !== location.hostname; })
On the remaining links we’re going to add a CSS class of “external” so we can style all external links. (If we want to.):
.addClass("external")
Now we’re going to let the visitor know that the link he/she is about to click on will open in a new window. We do this by adding a title attribute with a value of “Link will open in new window”. This will display as the tooltip when the visitor hovers over this link:
.attr({ title: "Link will open in new window" })
And in the last section, we’re going to tell the browser to open a new window when the link is clicked. By using (”window.open” instead of target="_blank", we’re keeping our links standards‐compliant†):
.click( function() {
window.open(this.href);
return false;
});
Non‐WP Installation
To use this script on your site (non‐WP), you must first have the jQuery library installed on your web server or call it from a third‐party such as Google. You can get the latest copy here from the official jQuery website.
Once you’ve installed jQuery on your server, place a call to it in your site’s <head> section like so:
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
Then copy/paste the external link script above in a new document using your favorite text editor and save it as “jquery_externalLink.js” (or whatever name you want). Then upload it to your web server and call it in the <head> section of your site like you did with the jQuery library above.
And that’s it! Now all external links will open in a new window, but any link that is internal will open in the same window.
Continue reading to learn how to install this in a WordPress installation.
Continues…
