Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Offsite Links = New Windows

Filed in:XHTML
Site News

Offsite Links = New Windows

June 1st, 2005  · stk

Custom DTDs, JavaScripting & XHTML "Standards"

Here Ye, Here Ye: from this day forward links which take you off-site (away from will open in a new window. If you click on this yonder b2evolution link, it'll open in a new window . If you click on our homepage link it opens in the same window.

There are some exceptions. (I'm King around here - that's Mr. King to you - and what good is power, unless you can abuse it?) Externally linked images won't have the 'external link' hover color designation, but a tooltip should clue you in. There are a few on-site features, like the "Email Story" tool, that will open a new window & the link is colored appropriately.

Some of you may not notice or care about the different link styles, but believe me, I gave it long and careful consideration. Even though many of the realm are against the practice, the ends justify the means. To learn about WHY this practice is deemed "evil", or to review some of various new-window standards-compliant techniques, or to just voice your opinion ... read on.

For those who are ready to click away: (because the thought of opening new windows is so completely distasteful) know this: you can elect to defeat this preference. :)

How to keep it all in one window:

 ie  In IE, right click an off-site link and select "Open". (See? That wasn't hard.)

 ff  In FireFox, right-click and select "Open Link in New Tab".

ff  And lastly (if you're a tax-evading, spam-generating, nobility-hating clown) just turn off JavaScripting. We've got you covered!

What's not to love? The method is semantically correct, validates as XHTML 1.0(strict) or XHTML 1.1, separates the data (HTML) from the behavior (JavaScript), degrades gracefully if JavaScripting is turned off, allows full right-click functionality (Open, Open in New Window, Print Target, Copy Shortcut & Add to Favorites), is identifiably styled and can be overridden.

The Debate

"PopUps are Evil", say a lot of folks. The use of adjectives railing against the activity is colorful, but they make a strong case.

•  Opening a new window resets the 'Back Button' (the 2nd most used navigation function, after hyperlinks). Beware Opening Links in New Windows

•  "Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet." If a user wants a new window, they'll open it themselves. (It's rude.)#2 of The Top Ten New Mistakes of Web Design

•  "Read 'top 10 mistakes of web design' and grow up." When a new window pops up, it adds clutter and doesn't open a new tab in my tabbed browser (Opera, Mozilla or FireFox). Why I hate Popup Windows

•  Let's face it, popUp windows have been abused. This video says it all. (Perhaps too much, as itt starts out good and -like a conversation- goes downhill from there. Unecessary use of foul language and the ending is gross.) By: Stick Carnage

•  "The next time I click on a hyperlink, only to have it cause an error in my browser, I am going to hunt down the author and pound them into holy oblivion. I'm not joking — I will kill someone." (Pop ups don't always work as advertised). How to Create Pop-Up Windows

•  "... there is no need to trick [users] into staying on your site, in fact launching a new window with every off-site click can ... actually [force] users to leave" (Pop ups shouldn't be used to keep people on your site). Tip #10 - Launching New and Pop-up Windows

These are all valid points, but the fact remains: there are times when opening a new window makes sense. Like when opening a PDF file. It's a pet peeve of mine to open a PDF file, close the window (thinking that I'm only closing the application) and instead, close the web page from which I launched the file. Because of the way I browse, I might find myself 4 websites away from where I started, several pages in each and relying in the back button (or having to hunt through the History) to get back to the originating page is a pain. I'd much rather close a window and retain the originating page as a separate window, an easy-to-remember visual clue for navigation.

The capability to open new windows may not have been part of the original HTML design, but the fact remains that the need and desire for this capability exists. You may not like them, but my guess is that they'll be with us for some time to come. Get used to it.

So you want to join the Dark Side? Even if you make the personal choice to author 'evil' popup windows, there is raging debate about HOW to do it. The W3C turned the web world on its ear when it deprecated the "target" attribute in XHTML(strict), because of its association with frames, which were also deprecated. So the question: "If target="_blank" is deprecated, how can one open new windows, following the W3C XHTML(strict) standards?"

There seem to be 4 choices, which is one more than Dan Cederholm offered in this SimpleBits Quiz.

(1) Validating to a Strict DTD, using a JavaScript PopUp

(2) Ignoring Validation errors, but using a Strict DTD with target="_blank"

(3) Validating to a Transitional DTD using target="_blank"

The fourth method, I would add, puts the "X" back in XHTML:

(4) Validating to a Strict (Customized) DTD that provides for target="_blank"


When Four Choices are Really Two

These four choices really boil down to two. I don't care what kind of games you play with target="_blank", you're really talking about either using target or using javaScript.

Targeting the Blank

By far, the easiest choice is (3) - backing off the (Strict) standard, opting for (Transitional) and using target=_blank, which is a supported attribute. In my mind, if you want to use the target attribute, this is the most sensible method. If you do anything else, you're just playing head games.

The worst choice is (2) - using the XHTML 1.0 (Strict) standard with the deprecated target attribute and ignoring validation errors. You're not doing anyone any favors, least of all yourself. You're pretending to meet the (Strict) standard, but not admitting that you don't. You might be thinking that the standard should include the target attribute, but it doesn't. If you want to do this, go the extra distance and choose the last option.

Option (4) is the most intriquing of the target="_blank" choices. Indeed, the XHTML standard was designed to be extended. Conceptually, extending the DTD is simple, though there are differences between XHTML 1.0 (Strict) and XHTML 1.1. I'll point out the basic steps, hopefully providing resources for anyone wishing to learn more about the details.

Resurrecting the Blank

STEP 1: Customize a DTD file: For XHTML 1.0 (Strict) the DTD is one file, though you will also need to download 3 "Entity Sets" (which have the file extension *.ent) as well. For XHTML 1.1, the DTD is modular, having 4 core modules and a number of Abstract (or optional) modules. You don't so much as edit a core module, to allow for the target attribute, as you just call the "Frames" Module.

STEP 2: Upload and Host your Custom DTD. Your files will be referenced in your HTML DOCTYPE declaration and need be present.

STEP 3: Modify your HTML to point to your custom DTD. The code looks like this.

<!DOCTYPE html
  PUBLIC "-//YourName//DTD XHTML11-with Target//EN"  

STEP 4: Validation Problems may occur when validating and there is some discussion about this at ASP.NET Resources and A List Apart. Jeffrey Zeldman's article "Strictly Speaking" comes with a sample page that works (and validates using the W3C validator). Yay.

Frankly, I'm not a proponent of this method. I believe that the target attribute was deprecated for a reason and that using it, violates the very standard that one is trying to achieve. Yes, XHTML is extensible, but extensions should be used when the audience is limited (company projects and the like). Serving documents to a broad audience (anyone around the World) dictates more strictly conforming to the standard.

There's also a way to extend the DTD, without using a separate, custom DTD file. The technique appends the changes to the existing, standard DTD statement in the HTML file as an "internal subset". The method is discussed in "Validating a Custom DTD". The method is not without its drawbacks, however, as there is a bug associated with this technique that persistently displays a ]> on the page. It is a method that is currently at use here. (If you refresh the page, you can catch a glimpse of the offending characters). However, using CSS, it's possible to limit the display until the external file is loaded. We switched our javascript to one that keys off of CLASS names and avoids the need for a DTD change. It's written by ¥åßßå.

Scripting the Java

Here's a peek at ¥åßßå's great script, which (if you want to use), must be placed just before the </body> closing tag.

<script type="text/javascript">
// written by ¥åßßå
var ygSetting = new Array;

// class="ext" default window parameters
ygSetting["ext"] = " directories, location, menubar, toolbar, scrollbars, status, resizable, top=50, left=50, height=500, width=700, screenX=50, screenY=50 ";

// class="ext newClass" ( newClass default overriding window parameters )
ygSetting["eList"]="location=no, menubar=no, scrollbar=no, status=no, resizable=no, height=400, width=400, left=400, top=200";
ygSetting["onlineUsers"]="scrollbars, top=200, left=200, height=<?=$winHeight?>, width=422, screenX=200, screenY=200";

function doLinks(){
  var yLinks=document.getElementsByTagName('a');
    ytClass=yLinks[i].className.split(" ")
    for (a=0;a<ytClass.length;a++){ if (ytClass[a].slice(0,3)=="ext") {ytExternal=true; break;} }
    if (ytExternal) { // yLinks[i].style.color="#f00";
// uncomment link style (above) to quickly ID external links
  yLinks[i].onclick=function(x){return yOpen(this)}

function yOpen(ypLink){
  ytClass=ypLink.className.split(" ")
  for (a=0;a<ytClass.length;a++){
    if (ytClass[a]!="ext"){if (ygSetting[ytClass[a]]) ytSettings=ygSetting[ytClass[a]];}
  if (!ytSettings) ytSettings=ygSetting["ext"];,"",ytSettings,false); return false;

doLinks();  //]]>

You can call it from an external scriptName.js file, but because we're passing some dynamic window height parameters from PHP to the script, the window parameter definitions need to be embedded in the main page (otherwise you can't pass the PHP variable to the javascript JS file). Have a look at the overriding class name "onlineUsers" in the code above, to see the PHP->JavaScript variable pass.

I've pasted ¥åßßå's code above. It's hot off the presses (today). He did a bang-up job, eliminated the need for DTD change, allowed a semantically-correct link behavior description (via class names), provided a default set of window parameters AND the ability to override the default with an additional class name. This custom script is EXACTLY what we were looking for, but couldn't find anywhere, online! Thanks, ¥åßßå!.

Views: 9745 views
2 Comments · GuestBook
default pin-it button
Updated: 1-Dec-2006
Web View Count: 9745 viewsLast Web Update: 1-Dec-2006

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.

Subscribe to Comments

Auto convert line breaks to <br />

1.flag Comment
Lol, you muppet, glad it works for you.

2.flag Kjetil Trondsen Comment
From my browser (an old Mozilla 1.7.3) the behavior is like this:

Left click: opens a new window. - OK

Rigth click and select "new tab" opens in a new tab - OK

ctrl left click - configured to be "new tab" opens link in a new tab AND a new window?????????

havent yet tested it in other browsers.