Applicability

HTML 4.x and XHTML 1.x.


Popup windows should be at the user's request, as suddenly opening new windows can disorientate or be missed completely by some users. The target attribute is deleted from HTML 4.01 Strict and XHTML 1.0 Strict, so new windows should be opened using ECMAScript. Ideally, behaviour should be separated from structure, in the same way that presentation is separated from structure with CSS.

Example 1
Markup:
The script is included in the head of the document, and the link has an id that can be used as a hook by the script.

<script type="text/javascript" src="popup.js"></script>

...

<a href="newwin.html" id="newwin">Launch New Window</a>

Script:

// Use traditional event model whilst support for event registration
// amongst browsers is poor.
window.onload = addHandlers;

function addHandlers()
{
	var objAnchor = document.getElementById('newwin');

	if (objAnchor)
	{
		objAnchor.onclick = function(event){return launchWindow(this, event);}
		// UAAG requires that user agents handle events in a device-independent manner
		// but only some browsers do this, so add keyboard event to be sure
		objAnchor.onkeypress = function(event){return launchWindow(this, event);}
	}
}

function launchWindow(objAnchor, objEvent)
{
	var iKeyCode, bSuccess=false;

	// If the event is from a keyboard, we only want to open the
	// new window if the user requested the link (return or space)
	if (objEvent && objEvent.type == 'keypress')
	{
		if (objEvent.keyCode)
			iKeyCode = objEvent.keyCode;
		else if (objEvent.which)
			iKeyCode = objEvent.which;

		// If not return or space, return true so that the user agent
		// continues to process the action
		if (iKeyCode != 13 && iKeyCode != 32)
			return true;
	}

	bSuccess = window.open(objAnchor.href);

	// If the window didn't open, allow the browser to continue the default
	// action of opening in the same window
	if (!bSuccess)
		return true;

	// The window was opened, so stop the browser processing further
	return false;
}
// End of script

Resources
All resources I looked at advocate things like embedding javascript within the markup. Maybe someone else knows of a good resource?

Tests
Test files attached to the email.