Using Invisible Elements to Maintain State

I. The Concept

If you do not need to maintain information after the end of the current browser session, but only so long as the browser remains an active application, then it may be attractive to use invisible form elements to store your data. You saw a very simple use of this technique last week in our discussion of forms and randomization: you simply declare the form element with a TYPE="hidden" attribute.

This trick works fine within a single page, but what happens when you want data to persist from page to page within a single browser session? We suggest you consider moving your form element to an invisible frame. Since one frame can remain constant as others change (the whole point of frames), you can use the frame as a storage place that can be used by all pages in the frameset.

II. Making Frames Invisible

Frames are curious entities: they can continue to function even when their dimensions are set to zero. In fact, the most common way to make a frame invisible is to give it a zero width. Consider the following example:

  <frameset cols="500,0" border="0">
    <frame name="seeMe" src="visiblePage.htm">
    <frame name="stealthy" src="storagePage.htm">
  </frameset>
 

A page assigned to a zero-width frame behaves exactly as if it were in a more normally sized frame: all of its exposed features, such as its forms array, are perfectly accessible to JavaScript. This means you can read from and write to forms in zero-width or invisible frames.

While you could declare the form element on pages within such frames as itself invisible, this seems redundant. Also, you might wish to look at your storage page outside the frame context, in which case it would be nice to have your form fields visible.

III. Accessing Information From Forms in Invisible Frames

Since forms on pages in zero-width frames are exactly the same as forms on pages in regular frames, this procedure should seem pretty familiar. Let's say we want a script on a page loaded in the first of the frames defined in the frameset above (the page visiblePage.htm) to read a value from a text input on the page that occupies the second, invisible frame (storagePage.htm). The crucial statement looks something like this:

  someVariable = 
  parent.frames[1].document.forms[0].elements[0].value;

This example assumes that the storage page is in the second frame and that the field from which we wish to read is the first element of the first form on the page. If that were not the case, you'd adjust your code accordingly. Note that you need to invoke the document object after you indicate the frame. We can get away without this step when dealing with images, but not with forms.

IV. Demonstration

You can see a demo project showing several uses of forms within an invisible frame. The arrival page contains a brief explanation and instruction set. All component files and scripts for this project can be found in a directory called invisibles within productionShare on Crow.

V. Designer's Note

Nancy Kaplan reports that some older browsers, especially older versions of Netscape Navigator, may display a telltale line at the right edge of the window unless the invisible frame is in the first position (unlike the example above). I have not seen this problem with Netscape browsers newer than 4.05, but you may want to keep it in mind. The invisible frame works just as well in the first position as it does anywhere else, though of course you'd have to reverse the COLS assignment given above.