Open A New Browser Window

Although best practice dictates that you shouldn’t force a new browser window on a user, sometimes (perhaps for a PDF file) you really want to. If you’re using a transitional doctype, this isn’t a problem. You’d simply use the ‘target’ attribute and set it to ‘_blank’.

<a href="index.html" title="new page" target="_blank">open window</a>

If you’re using XHTML Strict doctype however, the ‘target’ attribute is deprecated. This means that you can’t use it and have the page validate.

You can get around this by using JavaScript to insert the ‘target’ attribute dynamically. Let’s look at the following html. I’ve given each link that I want to open in a new window a ‘rel’ attribute of ‘ext’. I’ll use that attribute to identify the correct links on the page.

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="window.js"></script>
</head>
<body>
<ul>
    <li><a href="index.html" title="home Page">Home Page</a></li>
    <li><a href="other.html" title="other page">Other Page</a></li>
    <li><a href="new.html" title="new page" rel="ext">New Window</a></li>
</ul>
</body>
</html>

I can then use the following JavaScript:

JavaScript

window.onload = function () {
	var anchors = document.getElementsByTagName('a');
	for (var i = 0; i < anchors.length; i++) {
		if (anchors[i].getAttribute('rel') == 'ext') {
		anchors[i].setAttribute('target','_blank');
		}	
	}
}

This script is really simple. It loops through all of the links on the page and checks each one for the ‘rel’ attribute equal to ‘ext’. If the link has this attribute, the script inserts the ‘target’ attribute and sets it to ‘_blank’.

Do remember though, there is a reason that the target attribute is deprecated. This script will allow your page to validate but don’t overuse it. The only reason I can think is linking to PDF files

You can see a simple example here.

Category: Javascript // 3 CommentsOpen my Lovebox

3 Responses to “Open A New Browser Window”

Helen - May 3, 2009 at 9:42 am

Excellent stuff my man!

I really don’t like using the transitional doctype (though I’m not anal about it like some people) But, having loads of links for my portfolio, I felt it necessary.

The only thing now, is that I have to work through converting the pages!
Rob Mason - May 5, 2009 at 11:55 am

I am anal about using transitional – use strict! Good skills here, as it took me ages to find a suitable solution that a) worked well and b) I understood. I found one (can’t remember where) that didn’t add a target=” _blank” into the link, instead used a similar approach to pop-ups:

function externalLinks() { //we need getElementsByTagName for this to work if (!document.getElementsByTagName) return;
//get all the anchors within the document var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++) { //loop through all the anchors var anchor = anchors[i]; //check to make sure that we have a href, so its a real hyperlink //and make sure that we have a ref and its set to external if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") { //assign the dynamic function to the onclick event. anchor.onclick = function(x) { //store the variable so that we can actually use it within each function var p = x; return function() { var w = window.open(p); //try and open up a new window with the url if(!w) { //check to see if the window opened //let the user know that a window didnt open alert("A popup blocker seems to have blocked the window from opening"); } //return false to make sure the browser doesnt navigate away in the current window also return false; } }(anchor.getAttribute("href")); //pass through the href for this anchor } } }
//make sure we only set everything up on load //after the DOM has been inited window.onload = externalLinks;
Kit Barker - May 7, 2009 at 11:36 am

I don’t really like opening new browser windows at all to be honest.

It annoys me when a site I’m looking at opens new windows. I like to control whether a link is opened in a new tab, window or in the same window. All browsers let you do this, such as Command+Click in Safari.

Personally I’d rather try and teach people to learn to use there browser properly. The same applies with printing, back buttons and such like.

That said, you have to do what clients want and I get plenty of clients moaning if external links open in “their” window!

RSS

ElanMan