Create HTML Links that Open in a New Window
2012-07-30
Introduction
When you create a link in HTML using the <a>
tag,
the link opens by default in the current window. Sometimes it is
desirable to create links that open in a new window when clicked by the
user. For example:
Basic Solution
The simplest way to create a single link that, when clicked, opens
the link in a new window, is to add a target
attribute to the link
element. For example:
<a href="/" target="_blank">Link text</a>
The target="_blank"
indicates that the link should be
loaded into a new, blank, window.
A Cleaner Solution for Entire Sites
When maintaining large sites, a cleaner solution can be obtained by using JavaScript. This allows the link functionality to be changed simply without modifying every HTML document and also allows additional functionality to be added, such as tracking clicked links.
First, markup must be added to the HTML to indicate which links
should be processed. I like to use the rel
attribute and
set its value to "external" for links to locations outside of the
current site:
<a href="http://www.google.com/" rel="external">Outside Link</a>
There is nothing special about the term "external". This is simply an identifier that I chose to use.
Now we need some JavaScript that finds all the links that have their
rel
attributes set to "external" and process them as desired:
function externalLinks() { if (document.getElementsByTagName) { var anchors = document.getElementsByTagName("a"); for (var i = 0; i < anchors.length; i = i + 1) { var a = anchors[i]; if (a.getAttribute("href") && a.getAttribute("rel") === "external") { a.target = "_blank"; } } } } window.onload = externalLinks;
If you like to use the JQuery framework for JavaScript, the above code can be written as:
$(document).ready(function() { $('a[rel="external"]').attr("target", "_blank"); });