target=”_blank” XHTML replacement.
December 16th 2009
As you must already know, using target=”_blank” to open a page in a new window doesn’t validate in XHTML.
There’s a javascript workaround tho. This example is based on jQuery since it’s always included in my project and it’s my library of choice but it could be easily converted to any library.
The basics
To replace the target=”_blank” you should use the rel attribute. This attribute is used to specify the relationship between the document that contains the link and the document it refers to. So your links should have the attribute rel=”external” to specify the link is not a link inside your website but to another website. There are plenty of values possible for you rel attributes, I invite you to read about microformats.
Now rel=”external” doesn’t mean target=”_blank”. Adding that attribute won’t open the links in new windows, it’s only a more semantic way of specifying the relationship between pages. Since some of you might not want to open rel=”external” in new windows, browser vendors didn’t implement it as being the same as a target=”_blank”. That when javascript comes into play.
The javascript
$(function(){
$('a[rel="external"]').attr('target','_blank');
});
Easy isn’t it?
You actually need to either put that in a script of his own or at the bottom of you webpages. $(function(){ … }); is actually the short document.ready call in jQuery. Once the document is ready, it’ll traverse through each link and add the attribute target=”_blank” to them. This way the W3C validator doesn’t see them and you page still validates.
Working markup
Here’s a working example with jQuery loaded.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('a[rel="external"]').attr('target','_blank');
});
</script>
</head>
<body>
<a href="http://google.com" rel="external">Google!</a>
<a href="http://no-margin-for-errors.com" rel="external">My site!</a>
</body>
</html>
Your opinion?
What do you think about this technique? I personally stopped caring about my pages not validating when I use target=”_blank”, but I know some people really want to see their page validates whatever the price.
Related Posts
If what you were reading interested you, those might too! Check them out!
It`s a workaround to pass the validation. I`m always against such practices.
I use js to open new window and close it when needed. JS offers methods to do so and in my opinion there so no need to base on target deprecated attribute.
I’m not a big fan of opening pages in new windows. Most browsers allow me to control with a right click or a keyboard key where I want a link to open (either the same page, a new tab or a new window). Because most users don’t know about this feature, I feel obligated to code the opening of an external url in a new window so that they don’t quit my site. So using a technique like this is perfect; valid, semantic and clean. However, adding rel=”external” to all external links can be a lot of work and might not be possible using a cms wysiwyg. I use a similar technique:
var allowedDomains = [location.hostname, "myotherwebsite.com"];
$(“a[href^=http]:not(.internal)”)
.filter(function(el){
for ( var i=0; i -1 )
return false;
}
return true;
})
.bind(“click”, function(){ return !window.open(this.href); });
@JFFortier: That’s a very clever technique. Never thought of it.
The only thing, I always fear using window.open thinking browsers might trigger this as being an unwanted popup, but never got around testing it everywhere. I guess you never had problem with it?
I never had any problems with pop-up blockers but I must admit I never did an extensive testing on all of them. However we can easily replace the bind() by .attr(‘target’,'_blank’). Actually, I’ll do that for now on.
[...] No margin for errors Te gustó este post? Compartelo en tus redes sociales [...]
I would rather use window.open() instead of .attr(‘target’,’_blank’). I like the idea to use rel=”external”, but sometimes it might be useful to use class=”external” to show an icon next to the link.
BTW, popup blockers block those popups which are opened by other events than click.