Opening a browser in a new window

// February 5th, 2010 // Development, Javascript, JQuery, XHTML

For a long time target=”blank” has been redundant for accessibility problems. However, there are situations when opening a new window is neccessary. One technique I used is attaching a class of “external” to each link, and then usung javascript descibed in my get elements by class name example, attach a “window.open(this.href)” to each one. I now use JQuery, so that code has been superceded with just 2 lines of JQuery code.

Link Relationships

Links are used to locate web resources, so good use of the rel attribute enhance the logic and semantic meaning of these resources. Using the rel attribute for things such as pagination i.e. “next” and “prev” are standard link types, so where does “external” fit into this?

You can define additional link types not described in the specification. If you do you should use a profile to cite the conventions used to define the link types. You do this in the meta data profile attribute of the HEAD element:

1
<head profile="http://www.yoursite.com/profiles/core">

You can either use XML for this, or XHTML. A good XHTML example can be found at gmpg.org and at w2.org. As for an XML example, I can’t find one.

Styles and Accessibility

From an accessibility point, you should differentiate external links by some sort of style or description such as (opens new window). So, in order to do that you might want to add a class of external anyway.

JQuery

The actual code in JQuery is very concise. For each a tag with a rel of external, a new window will be opened:

1
2
3
4
5
$('a[rel="external"]').click(function()
{
	window.open(this.href);
	return false;
});

Leave a Reply