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
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?
While this works there are a couple of serious problems.
href element. If you’re wise enough to be coding in XHTML Strict you should already know that invalid code is a bad thing.
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>
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 attributef.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:
We can use the
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
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>
Extending the solution
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.