W3C Valid Replacement for target=”_blank”
Using target=”_blank” for links in an HTML page will generate errors when running code through the W3C validator. Well, if you are using the older Transitional document type it would not, but errors will for sure be reported for Strict document types. An easy and quick solution is to create a JavaScript handler for your links. This tutorials explains how to create an SEO-friendly (of course) W3С valid replacement for target=”_blank” by using only a few lines of jQuery code.
Here are two easy solutions to solve the task. In both solutions we will walk through each link in a page and apply our handlers to them so they will open in a new window. You should use the code below in your <head>…</head> tag, i.e.:
<head> ... <script type="text/javascript"> // Put the code here </script> </head>
Or you may save it to a separate file and link it in the <head>…</head> tag, i.e.:
<head> ... <script type="text/javascript" src="path-to-js-file.js"></script> </head>
Solution 1
While the target attribute is depreciated by W3C Strict standards, it is available via the DOM object. For the first solution, you can apply target=”_blank” via JavaScript. It will open in a new window and still be W3C valid. Here is the code:
$(document).ready(function(){
$('A[rel="_blank"]').each(function(){
$(this).attr('target', '_blank');
});
});
Solution 2
While the first solution is to apply ‘_blank’ value to a native link’s attribute ‘target’ via JavaScript, the second solution is to handle the click on the link and open it in a new window. Please note that both alternative methods are absolutely SEO friendly and W3C valid. The code for the second solution is:
$(document).ready(function(){
$('A[rel="_blank"]').click(function(){
window.open($(this).attr('href'));
return >false;
});
});
That’s it ;) Click the Demo button to see it in action.
Popular Categories
View All- Effects (7)
- Forms (6)
- Lightboxes (5)
- Photo Galleries (1)
- Preloaders (1)
- Tables (1)
- Tooltips (3)
- User Interface (10)
AJAX Tutorials
View All- How to Add Hints & Auto Focus Form Fields using jQuery
- Convert Images to Grayscale
- Advanced Plugins Development with ExtJS
- Rotate Images Using JavaScript
- Create Custom Cursors without .cur File
- Convert ASCII Character to Hex, Decimal and Binary Code
Paul
December 31, 2009
Thanks for the tutorial. I was looking hard for a SEO friendly way to do this. thanks guys!
Albert
January 5, 2010
Thanks. How to maximize the new window when submit the page through JS Code.
Darren – ajaxBlender
January 11, 2010
Here is a quick mod to maximize the new window for the 2nd. (It will not work with the first solution though.):
$(document).ready(function(){
$(’A[rel="_blank"]‘).click(function(){
var wndHandle = window.open($(this).attr(’href’));
wndHandle.moveTo(0, 0);
wndHandle.resizeTo(screen.width, screen.height);
return false;
});
});
Jonny
March 9, 2010
This doesn’t play nice with Lightbox… any suggestions?
Darren – ajaxBlender
March 10, 2010
Jonny, our testing shows that the script (and the above mod) are working correctly with a lightbox add-on. If you provide your code, we would be happy to troubleshoot it. Either post here or email us at support@. Thanks!