↑
Main Page

Hidden Frames

A trick that developers have used for a long time is the

hidden frame method

. The basic idea is to create a

frame that is 0 pixels high (thus, it’s hidden) that can be used by JavaScript to communicate with the

server. This type of communication requires two parts: a JavaScript object to handle the communication

on the client side and a special page that handles the communication on the server side.

As a very simple example, start out with a frameset:

<html>

<head>

<title>Hidden Frame Example</title>

</head>

</frameset>

</html>

This frameset is made up of two rows, the second of which has a height of 0 (in Netscape 4.x, frames

can’t be 0 pixels high, so the frame is still visible). The first frame is where the user is interacting; the sec-

ond is the hidden frame used to communicate with the server. By default, the second frame is loaded

with a blank HTML page.

In the first frame, two functions are defined: one to send the request to the server and one to handle the

response. The function that sends the request, called

getServerInfo()

, just assigns a URL to the hid-

den frame:

function getServerInfo() {

parent.frames[“hiddenFrame”].location.href = “HiddenFrameExampleCom.htm”’

}

This function is capable, of course, of attaching extra parameters to the request’s query string.

The second function, called

handleResponse()

, is called when the hidden frame returns from the server.

This function can do anything you want to deal with the data that is returned, but for this example, the

data is just displayed in an alert:

function handleResponse(sResponseText) {

alert(“The server returned: “ + sResponseText);

}

The page that handles the hidden requests must output a normal HTML page with a

ele-

ment enclosing the returned data. Using

makes it easy to deal with multiple lines of data,

which is difficult to do when outputting the data directly into JavaScript. This page must also call the

handleResponse()

function in the main frame with the data that was returned:

<html>

<head>

<title>Hidden Frame Example (Response)</title>

490

Chapter 16

19_579088 ch16.qxd 3/28/05 11:42 AM Page 490