Code Snippet: Same Window or New Window?
As a webmaster, I sometimes find myself in a position of defending my belief in the use of web standards. If you are using a "Strict" DOCTYPE, it is not standards-acceptable to open a link in a new window. The reasoning behind this is that (X)HTML should only contain information about what is going to be shown in the browser window. How it is shown is the province of CSS, and everything else is governed by the DOM. So if we are opening a new window, we should be using scripting, not (X)HTML.
I have had clients who insist that any link on their site that leads to another site must open in a new window. They don't want to lose viewers to another website. A new window opening does not necessarily stop viewers from leaving, but some website owners cannot accept this, and insist that I follow their wishes.
In this article, I will show you the best way to handle an offsite link in each of the two possible scenarios.
1. Open a link in the SAME WINDOW
Nothing extra is required to do this. Just a simple 'anchor' tag with an 'href' attribute is all that is needed. However, it is best to show the viewer when the link will go offsite. Then he can decide whether to (a) just click the link, then use his "Back" button to return, or (b) open a new window ( or tab ) himself by right-clicking the link and choosing that option.
An offsite icon should be used, placed either before or after the link. Here are two examples that I like -- you are welcome to copy my images for your own use. 
OR 
( I don't use the icon if the link is a banner image, since users know that this is an offsite link. )
To show the icon, there is a method that uses it as a background image. This saves space in your HTML code if you use an external stylesheet, but it has the disadvantage of making the icon part of the link, so it gets underlined too. I prefer just using an 'img' tag, and positioning the image using offpage CSS.
Here's the code:
<a href="http://www.website.com/page.html" title="whatever">linktext</a>
<img src="images/icon.gif" class="external" alt="external link" title="external link" />
.external {
margin-bottom:-4px;
width:12px;
height:20px;
border:0;
}
Notice that the icon now has its own 'title', so the user knows what the symbol means. The bottom margin should be adjusted to vertically center the image.
2. Open a link in a NEW WINDOW
If you have a client that insists on this, the simplest way to do it is to use a Transitional DOCTYPE, which still allows the use of the 'target' attribute. However, there is a way to open a new window and still use a Strict DOCTYPE. As I indicated above, we can use Javascript, since the 'target' attribute is allowed in the DOM.
Here's the code:
1 function newWindow()
2 {
3 if (!document.getElementsByTagName) return false;
4 var anchs = document.getElementsByTagName("a");
5 for (var i=0; i<anchs.length; i++)
6 {
7 var anch = anchs[i];
8 if (anch.getAttribute("href") && (anch.getAttribute("rev") == "external"))
9 { anch.target = "_blank"; }
10 }
11 return true;
12 }
Brief explanation:
Line 3 ensures that the script will not run if the browser doesn't understand javascript. If that is the case, then of course the link will open in the same window. Line 4 locates all of the anchor tags, and the following loop goes through them all and finds those that are links AND have the "rev" attribute set to "external". In line 9, the link is set to open in a new window.
I am using the "rev" attribute, rather than "rel", since the latter is now being used quite frequently as rel="nofollow", to ask search engines not to follow the link. "Rev", like "rel", is an attribute that was designed for future use, but has not yet been exploited by mainstream browsers.
How to use the script:
1) Follow the instructions on the main Snippets Page for how to install a javascript function that runs at load time.
2) Wherever you used to use target="_blank", you now put rev="external" instead.
Isn't that easy? Now you can satisfy your clients, and still maintain your integrity!
See it in action:
You can see the first scenario in use at the bottom of this page, with the link to my design website.
Snippet Menu
- Alert Box - Email
Form Field Required - Table Rows with
Alternating Colors - Track Hits from
Your Backlinks - Protect your MailTo
Link from Spammers - Overlay Box
Instead of Popups - Form Submission
No Double-Click - Change Dates
Automatically - Is it Standard
or Daylight Time? - Same Window
or New Window?
Related Sites
