So, you’ve decided to start creating your web sites with valid strict XHTML 1.0 and CSS. Your client wants a “links” page containing none other than links to other web sites. So you oblige and, to keep your client’s visitors on his site, you make the links open in a new window. So you throw in target="blank" and you’re done. Just run it through the W3 validator…
There is no attribute “target”? What gives?!
Yes, indeed, target is not a valid attribute in XHTML 1.0 Strict. There’s really only one way around it of which I’m aware, and that’s by using Javascript. My preferred method is as follows:
<a href="http://www.blizzarddigital.com/blog/" onclick="window.open(this.href, 'OffSite').focus(); return false;">This opens the URL in a new window and brings it into focus if the user had previously opened an “OffSite” window and didn’t close it.
You would still put the desired URL in the href attribute just like with any hyperlink. That way, if the visitor for some reason has Javascript disabled, the link still functions correctly. It just wouldn’t open in a new window.
One caveat though—in Firefox 2 and later with default settings, this code causes the linked site to open in a new tab, not a new window. If you find this to be a problem, there is a way around it, and that’s by adding the window options parameter such as:
<a href="http://www.blizzarddigital.com/blog/" onclick="window.open(this.href, 'OffSite', 'directories=yes,location=yes,menubar=yes,resizable=yes,scrollbars=yes,toolbar=yes').focus(); return false;">Those are all the options required to make the window appear normally with default tool and menu bars—kind of a pain. At this point, you may want to move the code into an external Javascript file. The function I use typically looks like the following:
function OpenOffSite(a)
{
window.open(a.href, "OffSite", "directories=yes,location=yes,menubar=yes,resizable=yes,scrollbars=yes,toolbar=yes").focus();
return false;
}Then the onclick attribute of your anchor would look like so:
<a href="http://www.blizzarddigital.com/blog/" onclick="return OpenOffSite(this);">Your links now open in a new window! Welcome to the world of XHTML conformity. 🙂
Tags: Javascript, New Window, Target, Web Design, Web Standards, XHTML