JAVASCRIPT

Active Client Pages: the Script Approach

Would you like to minimize the amount of time your users spend waiting for your web site to download? Now you can. Thanks to Active Client Pages, you can speed up at least some of the processing involved in downloading and displaying your web site. This three-part series explains the script approach to building Active Client Pages.

Author Info:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 1

June 05, 2009

TABLE OF CONTENTS:

I will use a simple example to illustrate the approach. In this example, you have a frameset with only one frame. There is JavaScript in the HEAD element of the frameset. This script has permanent variables (and can also have functions). The page (document) of the frame has an Input Text control. The frame page also has a script in its HEAD element.

When the frame is loaded, this script reads a value, “John,” of a variable from the frameset JavaScript and displays it in the Input Text control of the frame document. At the bottom of the frame page, a JavaScript is loaded. This script contains another content of the frame; that is, this script contains the next page. This content in the script will replace the present content of the frame, to give us the second document (page).

The frameset document and HTML file for the frame are downloaded at the same time. The frame document has an Input Text control. The onload event of the BODY element of the frame copies the value “John” of the variable from the frameset JavaScript into the Input Text control of the frame document.

There is an HTML button on the frame document. When you click it, you see the next page. This is the code of the frameset and the content of the first page. It needs explanation.

<html>

<head>

var theArray = new Array()

theArray[0] = "<head>";

theArray[0] += "<script type="text/javascript">";

theArray[0] += "function giveValue()";

theArray[0] += "{";

theArray[0] += "document.getElementById('FN').value = parent.defaultValue;";

theArray[0] += "}";

theArray[0] += "</script>";

theArray[0] += "</head>";

theArray[0] += "<body onload=giveValue()>";

theArray[0] += "<label for="FN">First Name</label> <input type="text" id="FN"> <br />";

theArray[0] += "<button type="button" onclick="parent.pInx = 1;location.replace('myChild.htm')">Display Second

Page</button>";

theArray[0] += "<script src="forNextPage.js"></script>";

theArray[0] += "</body>";

var pInx = 0;

var defaultValue = "John";

</script>

</head>

</frameset>

</html>

We shall have the explanation in the next section.

I have given you a lot for this part of the series. Let us take a break and continue in the next part of the series.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.