Jump to main navigation, main content

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 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: 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 filef.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.


  1. What the W3C says about the rel attribute. back

  2. The basis for the dom.js file I use is a JavaScript by Site Point, which is available here. back


skip to comment form
  1. Phil Green posted 3 days, 20hrs, 33mins after the entry and said:

    You’re only doing this on hrefs so use the .links collection of the document object rather than .getElementsByTagName (which can be emulated using .all BTW). This will enable it to work even on NN4 / IE4.

  2. Matt Wilcox posted 4 days, 3hrs, 18mins after the entry and said:

    Cheers Phil, I’ll look into it.
    I’m not very knowledgeable with Javascript, so extending the SitePoint function to better support the spec for the rel attribute was about as much as I could do. The intention here was to ensure the Javascript was fully W3C-DOM/ECMA-Script compliant. Support for older browsers, while appropriate in some cases, wasn’t the aim here, but if the script can do both then all the better. Once again, thanks for the input. smiley icon: smile

    Also, if anyone can point me in the direction of a good, modern ’standards aware’ Javascript learning resource, please let me know. Every single book and article I’ve ever looked at has been teaching old-fashioned and outdated techniques, like browser detection and code forking. I am looking for something that can teach me how to manipulate the W3C-DOM using web-standardised Javascript (ECMA-Script).

  3. Adam Payne posted 18 days, 22hrs, 40mins after the entry and said:

    hey matt only jus checked ure site 4 a few sec saw that java script open window thing if i understand u right (given i only jus glanced at the article) then use the behaviour thingy in dream weaver, code should be as follows;


    and fill the whatever i prob sound really stupid and got what ure on bout wrong but who cares.

From the archives

Other enteries filed under:

Web Development

Site information

Built with valid XHTML and CSS, designed with web standards and accessibility in mind. Best viewed in a modern browser [Firefox, Safari, Opera]

This domain and all content is a copy of my old website, for historical purposes only.