JavaScript: Opening a Window

 

Opening a Window

Opening a new window is an important feature of JavaScript. The command to open a new window is 'window.open(),' but there is a bit more to it. First, when you use 'window.open()' you automatically create a window object. For example, if your script has:

newWindow = window.open(" "," "," ")

then 'newWindow' is the new window object that you have created. To work with the new window you make use of the 'newWindow' object.

Secondly, notice the three pairs of double-quotes in the 'window.open()' command. The first pair of double-quotes holds the URL or filename that you want to have show up in the new window. The second pair of double-quotes holds the window's name; typically you can leave this blank. The third pair of double-quotes gives you the chance to specify many properties of the new window. Here is a summary of properties you can set inside the third pair of double-quotes:

 

Property Description
width window width (in pixels)
height window height (in pixels)
toolbar new window has a toolbar ("Back" button etc.)
location new window has a location bar
status new window has a status bar
menubar new window has a menubar
scrollbars new window has scrollbars (if they are needed)
resizable new window can be resized by the user
copyhistory duplicates Go or History menu for new window


For example, if your script has:

newWindow = window.open("myFile.html","window2","resizable,HEIGHT=300,WIDTH=300")

then 'newWindow' will be a resizable window that measures 300 pixels wide and 300 pixels high. The file 'myFile.html' will be displayed in the new window.

The command 'newWindow.close()' would close the new window. Typically the syntax to close a window is:

if (newWindow)

   newWindow.close()

which says 'if newWindow exists, close the window.'

The command 'newWindow.focus()' causes the new window to show up (to be in focus) after it is opened.

The commands to open and close windows can be put inside functions. The functions can then be run by an 'onClick' command inside a link or a button.

 

Example

Here is an example of a script that opens and closes a new window:

<script language=JavaScript>
<!--

var newWindow
function makeNewWindow()
{

newWindow = window.open("javaScriptEx24.html","window2","resizable,HEIGHT=300,WIDTH=300")

newWindow.focus()

}

function closeNewWindow()
{

if (newWindow)

   newWindow.close()

}

//-->
</script>
</HEAD>

<BODY>
<form><p>Check out our
<input type="button" value="Olympus Digital Camera" onClick="makeNewWindow()">
<p>
<input type="button" value="Close Digital Camera Window" onClick="closeNewWindow()">
</form>

Here is the contents of the file 'javaScriptEx24.html', which shows up inside the new window created in the script above:

<p>Consider this great Olympus D-490 Zoom Digital Camera. <br>Comes with USB Card Reader. <br>Priced at $490.<center><img src="digitalCamera.jpg"></center> <p>Send check or money order to Bones Enterprises, c/o Metuchen High School, 400 Grove Av., Metuchen NJ 08840

to see this how this code behaves in a new window.

 

Other Resources

Try these links on opening new windows:


Page Link
Opening a New Window www.htmlgoodies.com/primers/jsp/article.php/3478231
Opening a Window with a Function www.htmlgoodies.com/primers/jsp/article.php/3478241

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Create a very basic page. When it has finished loading, use an onLoad() command inside the <BODY> tag to call a function. The function should cause a small new window to pop up (you see this all the time on the Web). The first pair of double-quotes in the 'window.open()' command should be empty. The function should then use the 'document.write()' command to put some coherent text and an image into the new window. On the basic initial page, include a button that closes the small new window.

If you work on eEverything.com, the basic page can simply advertise MP3 Players for sale. In the new window that pops up, advertise the Creative Labs Nomad Jukebox MP3 player, which costs $420. Include a photograph of the MP3 player, which is located at: uzza.us/cs/web/MP3Player.jpg.