Main Page

Hidden Frames

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:
<title>Hidden Frame Example</title>
<frameset rows=”*,0”>
<frame src=”HiddenFrameExampleMain.htm” name=”mainFrame” />
<frame src=”HiddenFrameExampleBlank.htm” name=”hiddenFrame” />
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
, 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
, 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
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
function in the main frame with the data that was returned:
<title>Hidden Frame Example (Response)</title>
<script type=”text/javascript”>
Chapter 16
19_579088 ch16.qxd 3/28/05 11:42 AM Page 490

JavaScript EditorFree JavaScript Editor     Ajax Editor