Article
Designing with Frames - an Introduction
Scripted Frames
Often when you're writing a frames-based site, you want to use a frame to display something simple, like a title or a definition, and you find yourself writing scores of little HTML files to load into this frame.
Let's take the practical (if mundane) example of a frame for which we are able to choose the text and background colours. In one frame, we'll have links for each text/background colour combination. In the other, we'll display the result of the user's choice. Now, while we only need one HTML file for the frame containing the links, we'll need a different HTML file for each colour combination we want to be able to display in the second frame. Each of these files will be small, and will look like this:
<HTML>
<BODY BGCOLOR="bgcolor" TEXT="textcolor">
Can you read this?
</BODY>
</HTML>
Pretty boring, huh? The worst part of this is not that you'll need to type these one by one, but that the user's browser will have to download each one of them individually! What if I told you there was no need to write each of those little files? What if I told you that you can change the contents of a frame without having to load a new HTML file?
In the section above, I taught you a little about JavaScript objects, properties, and functions. Well it so happens that some JavaScript objects, besides having properties you can change, also have built-in functions that you can use to do special things to them. These built-in functions are called methods.
As you'll recall, the document object represents the HTML file loaded into a given frame. We've already seen that the document object has a property called location that you can use to load a new file into it. As it turns out, the document object also has a method called write(), which allows you to modify the contents of the frame directly. Along with write(), there are also two other methods we will need called open() and close(). open() clears the contents of the document and prepares it to be written into using the write() method. close() tells your browser that you're done writing into the document and it can now display the changes you've made.
So instead of loading a new file, we could change the contents of our sample frame like this:
parent.frames["sample"].document.open();
parent.frames["sample"].document.write('<HTML>');
parent.frames["sample"].document.write('<BODY BGCOLOR="bgcolor"
TEXT="textcolor">');
parent.frames["sample"].document.write('Can you read this?');
parent.frames["sample"].document.write('</BODY>');
parent.frames["sample"].document.write('</HTML>');
parent.frames["sample"].document.close();
Notice how the text we want to write goes between the parentheses in write(), and is enclosed in single quotes ('). The choice of single quotes was made so that they wouldn't interfere with any double quotes (") in the HTML code being written.
As a shortcut, we'll create a variable to store the location of the document we're writing to. Think of this as a JavaScript "bookmark", that we can use to refer to parent.frames["sample"].document with a convenient name. We use the keyword var to create a new variable and assign it a value.
var sampledoc = parent.frames["sample"].document;
sampledoc.open();
sampledoc.write('<HTML>');
sampledoc.write('<BODY BGCOLOR="bgcolor" TEXT="textcolor">');
sampledoc.write('Can you read this?');
sampledoc.write('</BODY>');
sampledoc.write('</HTML>');
sampledoc.close();
Now, for the big trick. What if we also used variables for the text bgcolor and textcolor? We could then change the value of these variables to whatever we wanted, and reuse this whole chunk of code to write our sample frame each time!
var bgcolor = 'black';
var textcolor = 'lightsteelblue';
var sampledoc = parent.frames["sample"].document;
sampledoc.open();
sampledoc.write('<HTML>');
sampledoc.write('<BODY BGCOLOR="' +
bgcolor + '" TEXT="' + textcolor + '">');
sampledoc.write('Can you read this?');
sampledoc.write('</B></FONT>');
sampledoc.write('</BODY>');
sampledoc.write('</HTML>');
sampledoc.close();
Notice how we use the '+' operator to stick pieces of text together with the contents of our two variables.
To complete the picture, we insert this whole chunk of code into a JavaScript function. The function lets us trigger this writing operation whenever the user clicks on a link. It also does one other important thing. It lets us specify the values of our two color variables when we trigger the function! We do this by inserting between the parentheses in our function name the names of the variables we'd like to specify the values of when the function is triggered, separated by colons.
Our completed function will look like this:
function chgcolor(bgcolor,textcolor) {
var sampledoc = parent.frames["sample"].document;
sampledoc.open();
sampledoc.write('<HTML>');
sampledoc.write('<BODY BGCOLOR="' +
bgcolor + '" TEXT="' + textcolor + '">');
sampledoc.write('Can you read this?');
sampledoc.write('</B></FONT>');
sampledoc.write('</BODY>');
sampledoc.write('</HTML>');
sampledoc.close();
}
A link to trigger this function with a Black background and LightSteelBlue text would look like this:
<A HREF="javascript:chgcolor('Black','LightSteelBlue');">...</A>
And that's it! You have now drastically cut the amount of downloading the user's browser will have to do, as well as the amount of typing you'll have to do (depending on how many colour combinations you plan to offer).