A valid way to open a link in a new window
Switching from an HTML transitional DOCTYPE to an XHTML strict DOCTYPE is fairly straightforward although there are quite a few elements and attributes not allowed in documents with Strict DOCTYPEs.
One of these is the target attribute so, if you decide that opening a link in a new window is appropriate, you'll need to use an alternative method.
First, we add the class "external" to any links that we want to open in a new window and also inform the user that this is going to happen by using the title attribute of the link.
<a href="http://www.url.com/" class="external" title="Explanatory text for link (link opens in a new window)">
Next, we use JavaScript to grab all links with the class "external" and open them in a new window:
Save the following code as "external_links.js"
<!--
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.className == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
//-->
Then we include the JavaScript file in the head of our documents:
<script type="text/javascript" src="external_links.js"></script>
To make users more aware that the link will be opening in a new window we will use CSS to add a background image to the link. I've used two 14px X 12 px gifs: 
and 
CSS:
a.external {
padding-right:18px;background: url(new-window.gif) 100% 60% no-repeat;
}
a.external:focus, a.external:hover, a.external:active {
background: url(new-window-hover.gif) 100% 60% no-repeat;
}
A couple of points:
If JavaScript is disabled, the links will open in the same window as normal.
You should only open links in new windows when absolutely necessary - it can be annoying!
Although this method works, it's really just a cheat to get pages to validate.
You can see this script in action if you look at the Links area to the right of this site.
Comments
Leave a comment