|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.
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:
<TITLE>Your Page Title Goes Here</TITLE>
Last Updated: May 7, 1999
Copy permission granted for non-commercial uses. Written by Colin Moock.-->
//This launches a new window and then
//focuses it if window.focus() is supported.
newwin = window.open(winurl,winname,winfeatures);
//delay a bit here because IE4 encounters errors
//when trying to focus a recently opened window
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:
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:
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!
please report bugs/issues to email@example.com.