Open Secondary Window Recipe

Purpose

This recipe allows you to open a new browser window when the user clicks on the paragraph or other HTML element containing the call to the function.

(Note that the purpose for this recipe is misprinted in the book; it repeats the "purpose" paragraph from the recipe for an alert message using input from a prompt.

Erratum

The function shown in the book on p. 215 should not have quotation marks around "url" and "windowName" in the line beginning window.open (url, windowName... However, you must have single quotes around 'url' and 'windowName' in the call within the element. The correct code is shown below and in the downloadable text file.

Sample

Click here to open a new window.

Function

<SCRIPT LANGUAGE="JavaScript"> function openWindow(url,windowName) { window.open(url, windowName, "height=x, width=y, menubar=yes, resizable=yes, scrollbars=yes, status=yes, toolbar=yes") } </SCRIPT>

where

	`URL`	is a variable passed from the calling element to the function. This variable identifies the URL of the page displayed in the window;
	`windowName`	is another variable passed from the calling element to the function. This variable supplies the name used to refer to the window in scripts;
	x,y	describe the overall size of the secondary window in terms of the number of pixels in the height and width (respectively);
	`menubar, scrollbars, toolbars`	are navigation elements displayed if the value is yes (the default) or not displayed if the value is no;
	`resizable`	determines whether the user can change the window’s size (default=yes; may also =no);
	`status`	is the message area at the bottom of the window; displayed if yes (the default), hidden if no.

Call within the element

<P onClick="openWindow('url','windowName')">Click here to open a new window.</P>

Possible modifications

As it stands, this recipe allows you to specify the URL and window name for each link. If you will always use the same window name, you could remove the variable windowName from the first line of the function, so that you pass only the URL as a variable: function openWindow(url). Then, within the body of the function, supply an actual name instead of using the windowName variable.

You can also open a new window directly from an event handler, without using a function at all. For example, to use a button to open a new window and show an animated demonstration of a process, you could include the following code:

<FORM><input type="button" value="Show Me How" onClick="window.open('url', 'windowName', 'height=x, width=y, menubar=yes, resizable=yes, scrollbars=yes, status=yes, toolbar=yes')"></FORM>

The components of the element handler have the same meaning as in the original function, except that url and windowName should be the actual URL and window name, rather than variable names.