How to make a link open in a new window with XHTML
The old-fashioned method of opening a link in a new window is to use the attribute target="_blank". Unfortunately, if you use an XHTML validator, you'll find that this attribute has been deprecated. Originally it was proposed to use the 'rel' attribute, like this: rel="external". Although this validates, it doesn't cause the browser to open a new window.
So, here's a way using JavaScript to have valid XHTML, and have your links open in a new window! Just make sure your links have the rel="external" attribute set, then add this JavaScript code to the <head> section of your web page. It will loop through your links, and dynamically add the old target="_blank" to the element, but this is on the client-side, so no errors in validation are caused.
addLoadEvent(externalLinks);
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.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
If you're going to use this method throughout your site, it would make sense to place this code in an external .js file, and reference it in the <head> if you page, like this:
<script src="external_links.js" type="text/javascript"></script>
on August 30th, 2006 at 9:22 am
So instead of writing invalid code, you use JavaScript to write the invalid code for you? Wouldn’t it be better to just avoid opening pages in new windows altogether?
I find it very annoying when I click on a link and a new window pops up—if I want to stay on the original page, I will open the link in a new tab…
on October 24th, 2007 at 9:41 am
The javascript isn't wrriting invalid code, it's defining behavior (that's what it's supposed to do). HTML is there to structure the content, and that's why target="_blank" is invalid code in that context.
There are good reasons to use new windows, it's not all just trying to keep visitors on your site. What about when you want a small window to pop up to give some details about something, and you need something bigger than a title="" but sending them to a new page would be awkward?
Personally, I think this is an example of the W3C missing the mark. It's kind of like the tag. If you want to nit-pick then yes, italics belongs in your CSS, but actually doing it that way is impractical enough to be wrong.
on August 14th, 2008 at 12:02 am
This article was exactly what I was looking for to keep my document strict. You are correct, JavaScript is a behavior and target="_blank" belongs in JavaScript
Thanks for the script!
on October 16th, 2008 at 12:23 pm
This suggestion just caps an altogether unuseable website. How many colours on this website are actually legible? SEO? My old black hat.
on October 25th, 2008 at 11:52 pm
Agree with "Busy" – target="_blank" is invaluable to keep the site visitor's experience on track …
Maybe too pragmatics a view?
N
on July 20th, 2009 at 1:37 pm
[...] A nice article on target="_blank" http://www.justin-cook.com/wp/2006/08/30/how-to-make-a-link-open-in-a-new-window-with-xhtml/ [...]