The topic of opening new windows seems to come up pretty often, so I’ll attempt to provide a clear answer for everyone.
Frustrated designer writes:
I need to open up a new window and customize it’s appearance (i.e. remove the status bar). Ordinarily, this would be achieved with the help of JavaScript and Window.Open()—so much for cross-browser compatibility. Then there’s the old target=”_blank” anchor attribute, but this is disallowed by the DTD I’m using (XHTML1.1), that… plus it doesn’t offer a way to get rid of browser UI elements. What’s a jerk to do?
The short answer
Use the window.open() method defined as follows:
window.open( URL, name [ , features [, replace ] ] ) making sure you create a valid anchor element with a valid href attribute. Instead of specifying the URL argument manually, use the DOM to read your href attribute like: this.href.
It should look like: onclick="window.open(this.href, '_blank'); return false;"
The long answer
Stick to what you know: create a standard anchor element with an href to your URL. Next, change this link so that it makes use of the onclick handler to call jabbascript’s window.open() method with a few arguments. We also need to make sure this onclick returns false to instruct the browser not to handle the link on its own.
Accessiblity gurus, please note that this is perfectly accessible despite the use of jabbascript. Even with jabbascript turned off in the client, any self-respecting browser will just handle the hyperlink as usual (because we have a ‘normal’ anchor element, right?).
If jabbascript is turned on (and come on, why should it ever be turned off?) it will respond to the onclick event and all will be right with the world.
You knew an example was coming, didn’t you?
onclick="window.open(this.href, '_blank'); return false;"
The explanation:
The first argument, this.href is key: By using this.href, we are accessing the value of the current element’s href attribute using the DOM. This means we don’t need to supply window.open() with the url manually—we stay DRY by using the href attribute in our link.
The second argument (the ‘name’ of the new window to be created) is given the special name (“_blank“) which serves to inform window.open() that it’s mission is to launch a new window (duh). Think of it like using <a target="_blank"> in older versions of html. Now stop thinking about it entirely.
Note again the return false follow-up to our call to window.open(). This is important as it prevents the browser from handling the link itself—If the onclick handler doesn’t return false, the browser will handle the click normally, and both windows will wind up at the url specified by the href attribute.
Controlling attributes
For those interested in controlling the attributes of the new window, there is an optional third argument that window.open() accepts—a string of properties for the new window.
Here’s an example of a call to window.open with the properties argument:
onclick="window.open(this.href,'_blank','width=500,height=500, menubar=no'); return false;"
It’s probably worth noting that, as per the xhtml spec, you need all your attributes to be lowercase (including attributes that pertain to event handlers). So, while onClick may work in most browsers, you’ll need to use onclick if you want xhtml compliance.
The end
While I generally try to avoid creating new windows for reasons I don’t care to get into, I do on occasion use this method as a straight-up replacement for target="_blank" when appropriate.
My dog’s breath smells like cat food.
