Putting Links in New Windows, part II

I got an interesting comment from Scott of http://randsco.com regarding my Putting Links in New Windows article.

Is there a way to insert a link so as to uniquely control the position/size of the ‘newwin’ popUp window?

Currently, no. However, if you make a few changes, then it’s very doable. If you haven’t already, read the Putting Links in New Windows, or else a lot of this won’t make sense.

Scott asks for a way to do this on a case-by-case basis. Obviously, you could edit the popWin function like so:

  // Open a new window with the link's href.
  var newwin = window.open(a.href, 'name‘, ‘features‘);

Of course, that would make every popup the same. To truly be case-by-case, the name and features have to be based on something in the A tag, and must fall back to some default values.

Clearly, you can put the “name” in the “name” attrib, and that just makes sense. We need another place in the XHTML to stick the features. However, nothing really seems to fit. At first, I thought of using “rev”, but that really wouldn’t be a good sematic approach, since rev has meaning. So, I decided to add an attribute to the A tag, called “features”.

Before continuing, you may wish to read some things about Custom DTDs, because that’s what we’re going to do:
There are downsides to this approach, but in this case, in my opinion, they’re minor.

Up at the top of your document, where you have the <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> or some such, turn it into this:

"-//W3C//DTD XHTML 1.0 Transitional//EN"
  <!ATTLIST a features CDATA #IMPLIED>

This says: the A tag might have an attribute called “features”. Don’t sweat it.

You may get an error when you validate your document, stating that the attribute is not recognized. See http://www.alistapart.com/articles/customdtd/ to validate the document without getting those errors.

Now, in your XHTML, do something like this:

<a href="http://google.com" rel="external" features="toolbar,width=150,height=100">Google!</a>

Change popWin() to this:

function PopWin(e) {
  if (window.event && window.event.srcElement) a = window.event.srcElement
  else if (e && e.target) a = e.target
  if (!a) return;
  a = getParent(a,"a");
  // Open a new window with the link's href.
  var features = "";
  var name = "";
  if(a.name) name = a.name;
  if(a.getAttribute("features")) features = a.getAttribute("features");
  var newwin = window.open(a.href,name,features);
  // The thought is that if the new window didn’t (popups blocked or whatever)
  // we want to return true so the link is follow normally.
  if( newwin )
    if( e.returnValue ) e.returnValue = false;
    if( e.preventDefault ) e.preventDefault();
    return false;
  else return true;
function getParent(el, pTagName)
  if (el == null) return null;
  else if(el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) return el;
  else return getParent(el.parentNode, pTagName);

Voila! Now, when you click the link, it should use the features attrib from the link to get the height, width, etc.

Leave a Reply

Comments are moderated like crazy using a variety of plugins. There is a very high likelihood that your comment won't show up right away, especially if you have never commented here before, but it was not deleted.

Please be patient, and do not post your comment more than once. It will show up once it is approved.

You must be logged in to post a comment.