JAVASCRIPT UTOPIA  back to
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.

the desire
what do we want to do? we want to:
  • launch a window with specific attributes, like height and width.
  • make sure the newly launched window always comes to the front of the screen ("focus" it).
  • let multiple links open windows and target windows using one function

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:

  1. make the page for the main browser window.
    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>
    
    
    
  2. add the event handler(s) that will call the window launcher.
    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>

  3. make the page that goes in the new window.
    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

  1. When IE3 opens a new window via the window.open method, it first draws a new window that matches the same size as the opener window, then reconfigures the window to match the features given in the window.open call. The result is that IE3 looks like it's opening a first window, then closing it, then opening a second window, complete with a fireworks display of screen flickering.   ^^

  2. Strangely, the first time IE3 tries to re-open a window that already exists, it actually focuses the previously opened window. Subsequent times, however, it leaves the new window behind the main browser window.    ^^

  3. here's an extensive faq on window opening techniques and window manipulation: http://www.irt.org/script/window.htm

revision history

  1. may 7, 1999: posted.
  2. may 21, 1999: fixed a couple of stray > signs in the cutnpaste code.
  3. august 19, 1999: added the link to the window faq on irt.org.
  4. june 6, 2001: added example for launching multiple windows.