Archived entry | Matt Wilcox .net

XHTML Strict pop-up windows

Why open a page in a new window?

Before creating a link that will open in a new browser window it is important to ask yourself why that link should open in a new window. Setting a link to do so means you are making a choice on behalf of the user, but some users will expect the link to open in their current window and others would prefer it to open in a new tab. By specifying a link as a pop-up you will have taken that choice from them. Think carefully before making a link a pop-up; ask yourself whether it is the best solution or whether you’re doing it simply because that’s how you browse the net, with a task bar full of browser windows. Not everyone does, and forcing your browsing habits on the end user will be annoying for them. If you do decide a pop-up is appropriate it’s always a nice idea to indicate that the link will open in a new window. Your users will appreciate knowing that before they click on it.

XHTML Strict and the target attribute

Whether you are in favour of user instigated pop-up windows or not, there comes a time when you simply have to use one. A client demands it, a situation just doesn’t warrant a page re-load, or you have a good reason why a pop-up works better. You’re coding with XHTML Strict as your doctype because you’re a web savvy forward thinker, only there’s a snag. XHTML Strict has abandoned the target attribute, and you can’t use it any more. So how do we make a link open in a new window?

Possible solutions

The first idea to spring to mind, shortly after cursing the W3C, is to use Javascript to get the job done as follows

<a href="javascript:window.open('http://www.google.com')">launch popup</a>

While this works there are a couple of serious problems.
Firstly, your XHTML won’t validate, as you’re not allowed to put Javascript inside the href element. If you’re wise enough to be coding in XHTML Strict you should already know that invalid code is a bad thing.
Secondly, If the user doesn’t have Javascript enabled or is browsing on a device that doesn’t support Javascript (mobile phones, PDAs etc) the link won’t work.

With that solution ruled out you could try using an onClick event handler. Of course you want your website to be fully Accessible too, so you would also want to use an onkeypress listener, otherwise the link wouldn’t work for anyone not using a mouse. You would end up with an anchor tag looking like this

<a href="http://www.google.com" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">launch popup</a>

Well, that’s a lot better. If the user has Javascript enabled the link will open in a new window, and if they haven’t got Javascript then it acts as a normal hyperlink and opens in the same window.
It’s not very tidy though, and that’s a lot of extra code, especially if you’re going to have multiple pop-up links on a page.

A better solution

A better solution comes to mind when you realise the W3C has depreciated the target attribute because there’s a more meaningful and flexible attribute to use instead. XHTML mark-up is designed to define elements within a current page, with respect to the current page. Which is why they have given XHTML’s anchor tag the rel attribute^f.1. It defines the relation between the current document and the link object, and can contain any number of values, each separated by a space. This is important because you may wish to describe a links relation in more than one way. The link might be the websites bibliography and also the previous page. The rel attribute would then look like this: rel="bibliography previous".

We can use the rel attribute in combination with an external javascript library to cut down on code and create a more useful and meaningful way of opening pop-up windows.

The external javascript file is a simple ‘library’ of W3C DOM compliant functions. ‘Library’ is in inverted commas because the file I’ll give you only has one function, though you could (and probably should) put any other standards compliant functions inside that file.
Because it’s an external file it will only be called if the users browser supports Javascript, and once it’s been downloaded it is stored in the browsers cache, just like CSS. That means people without Javascript won’t download code that’s useless to them, so they save bandwidth and the page loads faster. It also means the people that can use Javascript download the file just once, and they too save bandwidth and get faster loads in the long run.

The Javascript file^f.2 contains a function called externalLinks() which checks to see if the browser supports the W3C DOM, checks the links are OK to work with and then does it’s thing, returning links which will open in a new window. Take a look at the file if you want to figure out how to extend what it does, there are explanations inside.

Implementing the solution

Download the Javascript file, unzip it and put it somewhere inside your site root. I put it inside an ‘includes’ folder, just to keep my directory structures tidy, but anywhere will do as long as you remember where. You then need to insert the following code inside your XHTML <head> area.

<script type="text/javascript" src="/PATH/TO/FILE/dom.js"> </script>

Now all you have to do to create a standards compliant pop-up is create a link such as this

<a href="http://someurl" rel="external">pop-up</a>

That’s it.

Extending the solution

Because the ‘clever’ bit is all contained inside a single Javascript function you are free to extend it yourself. What if you wanted a pop-up window to be a certain size? Just as an example I have defined an extra rel attribute the script will recognise: rel="sized". This will open a 500px by 400px window. Take a look inside the dom.js file and you should be able to see how I’ve done that, and then create your own values and behaviors.

Entry Information

Posted:

Sun, 21st Nov 2004 at 17:11 UTC

Filed under:

• Web Development

Tags:

• accessibility
• best practices
• web development
• web standards