I was making my rounds on the ol’ Interweb, I stumbled across a nice site (Tim Berners-Lee would be proud at my method of finding stuff by simply following link after link after link, et al.), which happened to be written in XHTML 1.1. My site is written in XHTML 1.0 Strict, and one of the most annoying things about 1.0 Strict is the absence of the target attribute. I like to link to offsite pages with a target="_blank" in my anchor tags. This is due to the nature of target; it goes against the whole idea of separation of presentation, structure and content (HTML has to do with structure, not the control of the window).
HTML 1.1 is like an even more strict version of XHTML 1.0 Strict, so I was astonished when I realized that the site (wadny.com, by the way) had links that opened up in new windows! What the… HOW?!! Granted, you can whip up some js to pop up new windows, but most of those techniques are either blocked by pop-up blockers (as well they should), or make for non-compliant code (in which case, I’d just use XHTML 1.0 Transitional and use the damned target attribute!). What’s worse, is most of those scripts wouldn’t work if the user had JavaScript turned off… not just not open in a new window… not open at all. Not very nice. So you can see why I was so curious when a valid XHTML 1.1 page had popup windows. After some source browsing, I figured it out: it was a JavaScript, but it was a beautifully crafted, correctly deployed JavaScript. There were no special onclick or other js attributes, each linking to code or containing js snigglets… just a simple rel="external" in each link that was to be external. I was impressed.
The beauty of this is that, one, it follows XHTML guidelines and practices, and two, if the user has javascript turned off, the link still works. It may not load in a new window, but you still get there, without any troublesome workarounds. In addition, pop-up blockers don’t mistake it for a pop-up ad.
So, of course, I integrated it into my own site.
When you see a link like this offsite link to Google, you’ll know you’re getting a new window by either the icon, the tooltip that appears, or even the status bar (well, at least in Safari it says it will open in a new window).
So, how is it done? First, we make a call to load a javascript in our header. Let’s say you call the script “linkloader.js” and that said script contains the code as found in this file, popup.txt. This script is loaded when the page is loaded. Anytime there is a link clicked that has rel="external", the script tells the browser to treat it like it was a target="_blank". So, with this script loaded in your header, all you have to do is add the rel="external" to your external links.
If you have any comments or questions, please feel free to comment below.
