• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Part IV: JavaScript > Manipulating Windows and Frames with JavaScript

Chapter 20. Manipulating Windows and Frames with JavaScript

In this chapter

Referencing Multiple Windows with JavaScript

Making Use of Window Events

Window Methods for Getting User Input

Filling Your Windows I: The location Object

Filling Your Windows II: The document Object

JavaScript Windows Example

Creating and Using Frames

Communicating Between Frames

Using Hidden Frames

JavaScript Frames Example

As discussed in Chapter 19 "The Web Browser Object Model," you can create, manipulate, and access the properties of Web browser windows by using the window object. Chapter 18 showed the properties, methods, and events associated with the window object. This chapter shows some practical examples of this; it is meant to show you how to create and then use multiple windows.

Listing 20.1 shows the HTML document Window1.htm. This document uses a single JavaScript statement to create a window and load that window with another document (Form1.htm, shown in Listing 20.2). The new window is created using the window object's open() method. Figure 20.1 shows the result of loading Window1.htm into Internet Explorer. (In many of the examples shown in this chapter, the created windows may be rearranged for improved visibility—all appear in their original size, however).

Figure 20.1. JavaScript can create new Web browser windows and configure them to look the way you would like for your applications.

Code Listing 20.1. Window1.htm—Create New Web Browser Windows withwindow.open()

<H1>Window Example #1</H1>
Jim O'Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
<!-- Hide script from incompatible browsers! -->
MyWindow = window.open("Form1.htm","MyWindow",
   "toolbar=no,location=no,directories=no,status=no," +
   "menubar=no,scrollbars=no,resizable=no," +
//   Hide script from incompatible browsers! -->


When loaded into a Web browser, the HTML document in Listing 20.1 creates a new window and displays the HTML form given in Listing 20.2.

Code Listing 20.2. Form1.htm—HTML Documents for Created Windows Should Be Sized Carefully

<FORM NAME="MyForm">
<TR><TD><B>Form Element Type</B></TD>
<TR><TD><B>TEXT</B> Element</TD>
    <TD><INPUT TYPE="TEXT" NAME="MyText"></TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
    <TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox1"></TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
    <TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox2"></TD></TR>
<TR><TD><B>CHECKBOX</B> Element</TD>
    <TD><INPUT TYPE="CHECKBOX" NAME="MyCheckBox3"></TD></TR>


Three arguments apply to the window.open() method, with the following meanings:

  • The first argument is the URL of the HTML document to be loaded into the new window.

  • The second argument is the name of the window that can be used as the TARGET attribute of the <A> tag.

  • The third argument is optional and contains a comma-separated list of configuration options for the created window. The configuration options are the following:

    • toolbar = [yes|no]— Controls the display of the Web browser window toolbar

    • location = [yes|no]— Controls the display of the Web browser window location bar

    • directories = [yes|no]— Controls the display of the Web browser window directory bar

    • status = [yes|no]— Controls the display of the Web browser window status line

    • menubar = [yes|no]— Controls the display of the Web browser window menu bar

    • scrollbars = [yes|no]— Controls the display of the Web browser window scrollbars

    • resizable = [yes|no]— Controls whether the created window can be resized

    • width = # pixels— Sets the width of the new window, in pixels


If you want to set one of the options for a new window, set them all; otherwise, your results may not be what you expect because each Web browser (and even the same browser on different platforms) handles the default options differently. It is better to play it safe and completely specify exactly how you want your windows to look.

In addition to the arguments for the window.open() method, it also has a return value. The method returns a handle that gives you the name of the newly created window. This enables you to access and manipulate the objects in the new window from the original.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint