Managing JavaScript "popup" windows

Jake Howlett, 11 October 2000

Category: JavaScript; Keywords: Focus Blur Window Open

When you use the JavaScript window.open method to open a new browser window you may experience problems when you try to re-use it.

For example, open the link below and then click back inside this window so that the new one goes behind it.

window.open('/icons/vwicn001.gif', 'SampleWindow1', 'WIDTH=300,HEIGHT=250');

This has opened a new instance of the browser called 'newWindow'.

Now click on the above link again. The link does not open a new window as expected. That is because a window with that name ('newWindow') already exists. The link is actually working, you just can't see it.

This method is fine if your users are wise enough to know that they need to toggle back to the new window using the "task-bar" or similar method. But, most users will end up confused and annoyed after clicking the link a dozen times expecting it to appeat in front of them.

The solution is to use the following customised function in the place of the window.open method that checks to see whether or not a window of that name is already open. If so, then it will call focus on it so that it is returned to the foreground.

Note: It is a good idea to make this function available globally and to then always use it in place of the window.open method (it accepts exactly the same arguments).

function windowOpener(url, name, args) {
if (typeof(popupWin) != "object"){
popupWin = window.open(url,name,args);
} else {
if (!popupWin.closed){
popupWin.location.href = url;
} else {
popupWin = window.open(url, name,args);
}
}
popupWin.focus();
}

Proof of the pudding:

Clink the link below and then return to this window.

windowOpener('/icons/vwicn002.gif', 'SampleWindow2', 'WIDTH=300,HEIGHT=250');

Now click the above link again. It should come back in to view.....

What is the above function doing?

The first thing it does is to see if it has already been run by checking for a variable called 'popupWin'. If it is the first time then this variable is set to an object variable by opening a new window. If the window still exists then its attributes are reset else a new window is opened. The final thing to do is focus on said window.

Note: If you try and use the same function to open another window e.g. like the link below:

windowOpener('/icons/vwicn003.gif', 'SampleWindow3', 'WIDTH=600,HEIGHT=150');

The popupWin object will still be holding reference to the first window so this will get re-used. Not only this but it won't open using the parameters specified in the newer link. If you need to open multiple different windows then use this function instead:

popupWins = new Array();

function windowOpener(url, name, args) {
/*******************************
the popupWins array stores an object reference for
each separate window that is called, based upon
the name attribute that is supplied as an argument
*******************************/
if ( typeof( popupWins[name] ) != "object" ){
popupWins[name] = window.open(url,name,args);
} else {
if (!popupWins[name].closed){
popupWins[name].location.href = url;
} else {
popupWins[name] = window.open(url, name,args);
}
}

popupWins[name].focus();
}

The popupWins array is defined outside the function, making it global. This is done so that it doesn't get redefined each time the function is called, losing references to previous windows.