Developer

Fun with frames: Script dynamic frames

Find out how to create dynamic frames with a few lines of script.

By Paul Anderson
(updated 5/20/99)

If a frame contains only a small amount of information, it's often more efficient to script the content rather than create separate tiny HTML pages, each of which must be retrieved from the server. A few lines of script can make the browser write a custom page into the frame.

You do this the same way you write content into any window, through the frame's document. The difference is that you can rewrite the visible content in the same window—as many times as you want—without relying on DHTML.

Suppose you have a group photo of your department's staff in one frame, and you want each individual's name and title to appear in a small frame below the photo when the reader clicks on him or her. Instead of creating a tiny HTML page for each name and title, you could write a JavaScript array as shown below:

empID = new Array();
empID[0] = 'Dana Corolla, CEO';
empID[1] = 'Arturo Montero, senior editor';
empID[2] = 'Percy Tercel, head designer';
empID[3] = 'Angus Coupedeville, astrologer';

You would then create an image map for the group photo, linking each <AREA> to the function showMe(n)—as shown below—which creates a simple Web page in the frame (assumed here to be the second) using the indexed data:

part1 = '<HTML><HEAD></HEAD>';
part1+= '<BODY bgcolor=#ffffff><DIV align=center>';
part2 = '</DIV></BODY></HTML>';

function showMe(n) {
 parent.frames[1].document.open();
 parent.frames[1].document.write(part1);
 parent.frames[1].document.write(empID[n]);
 parent.frames[1].document.writeln(part2);
 parent.frames[1].close();
 }

The new pages you generate don't have to come from a static array like the one above; they could just as easily be random or customized by user input. (CNET Builder.com often uses this trick to create interactive charts.)

Paul Anderson is senior producer and technical editor for CNET Builder.com.

Editor's Picks

Free Newsletters, In your Inbox