| JAVASCRIPT UTOPIA |
| LAUNCH POP-UP WINDOWS ELEGANTLY (VERSION 2.0) |
if you've ever seen poor IE3 struggle to render a popup window1 you're probably thinking "launch a window elegantly?? hunh??". okay, so maybe the title of this article should be "Launch Pop-up Windows As Elegantly As Possible".
the last time i wrote an article on this subject i got dragged down into browser bug fighting and kinda lost sight of the goals i was trying to achieve. unfortunately that greatly over-complicated the final approach i took to window-popping. the main problems i was trying to overcome were detecting if a previous window was still around and focusing any old windows without hitting the various browser bugs. this time we're going to avoid all those issues *and* make this popup window thing reliable and easy to implement.
what do we want to do? we want to:
the utopian approach
here's how the window launcher works: we have a function that launches the window, and an event (eg. a mouse click, a page loading) that will ask our function to launch a new window, telling it what the window should look like and what page should be displayed. the function does two things: 1) it launches a window, 2) it focuses that window after launching it. this is the key to avoiding the problems with detecting previous windows. we *always* launch the window (whether or not one's there already). if one is already there, it will be replaced by the new one because it's named the same thing. and we *always* attempt to focus windows we launch. that solves the most rampant problem with window launchers on the web: a user clicks on a link which opens a window and then clicks on another link in the main window, hiding the launched window in the process. many users just assume the second link is broken, but it's not--it's in the launched window behind the main browser window. i used to try to fix that common problem by detecting any previously opened windows, but i was missing the easiest workaround--just attempt to focus any window that gets launched. can't hurt, and it always works, and we avoid the buginess of detecting previously opened windows (see my last article for more info).
so let's get on to the code.
the code
to implement the window launcher you need only 2 things: 1) the launching function, 2) an event to call the launching function. here's how you combine those things into a working system:
this is the page from which your window will be launched. it has both the standard html construction and the window launching function. note that window.focus wasn't introduced until JavaScript 1.1, so IE3 users won't get the new window brought to the front for them.2 the function doesn't execute window.focus on browsers that don't support it because it would cause an error ("property or method not supported"). see my article on writing backwards compatible code. copy 'n' paste the following code into your text or html editor and save it as mypage.html:
<HTML>
<HEAD>
<TITLE>Your Page Title Goes Here</TITLE>
<!--
Popup Window
Version 2.0
Last Updated: May 7, 1999
Code maintained at: http://www.moock.org/webdesign/javascript/
Copy permission granted for non-commercial uses. Written by Colin Moock.-->
<SCRIPT LANGUAGE="JavaScript"> var javascript_version = 1.0;</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1"> javascript_version = 1.1;</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var newwin;
function launchwin(winurl,winname,winfeatures)
{
//This launches a new window and then
//focuses it if window.focus() is supported.
newwin = window.open(winurl,winname,winfeatures);
if(javascript_version > 1.0)
{
//delay a bit here because IE4 encounters errors
//when trying to focus a recently opened window
setTimeout('newwin.focus();',250);
}
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
any event can call the window launching function. the most common ones you'll use are probably links, ONLOAD, and form buttons. when you call the window launching function, you have to pass the URL of the page you're loading (winurl), the name of the window you're creating (winname), and the features of the window you're creating (winfeatures). for a list of possible window features visit WebReference's Feature List. here's some sample code you can use for your window launching events:
<A HREF="javascript:launchwin('yourpage.html' , 'newwindow' , 'height=150,width=300')">Your Link Goes Here</A>
try it out
<BODY ONLOAD="launchwin('yourpage.html' , 'newwindow' , 'height=150,width=300')">
<FORM><INPUT TYPE="BUTTON" VALUE="Launch Window" ONCLICK="launchwin('yourpage.html' , 'newwindow' , 'height=150,width=300')"></FORM>
to launch multiple windows, use a different string for each window's winname. for example:
<A HREF="javascript:launchwin('yourfirstpage.html' , 'newwindow1' , 'height=150,width=300')">Your Link Goes Here</A>
<A HREF="javascript:launchwin('yoursecondpage.html' , 'newwindow2' , 'height=150,width=300')">Your Link Goes Here</A>
this is the fun part. it's your new window, just make sure you have a page to put in it, and that your event handler's "winurl" matches the name of that page.
that's it. happy launching!
known issues
none yet.
please report bugs/issues to colin_moock@iceinc.com.
footnotes
revision history