First let's come up with
a simple function that will write to the right frame. I've found that when using
javascript with frames, it is wise to put as much coding as possible in the
topmost frameset page (master.html in this example). So re-open master.html
and add the following...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT
language="JavaScript"><!--
function RightWrite()
{
}
//--></SCRIPT>
</HEAD>
<FRAMESET COLS="200,*">
<FRAME SRC="left.html" NAME="leftframe">
<FRAME SRC="right.html" NAME="rightframe">
</FRAMESET>
</HTML>
So far just an empty function. Now let's write my name to the right frame.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript"><!--
function RightWrite()
{
window.rightframe.document.clear();
window.rightframe.document.open();
window.rightframe.document.write("Joe");
window.rightframe.document.close();
}
//--></SCRIPT>
</HEAD>
<FRAMESET COLS="200,*">
<FRAME SRC="left.html" NAME="leftframe">
<FRAME SRC="right.html" NAME="rightframe">
</FRAMESET>
</HTML>
See what we're doing here? Basically it's a simple document.write() thing except
we're telling the document to do it to the document that resides in the rightframe.
There are also a couple other lines that are necessary when writing to a window
(or frame). First we clear() it, then we open() it then we write() to it, then
we close() it.
We're not quite done yet. We have to make the link that calls the function.
Re-open left.html and add the following...
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<A HREF="javascript:top.RightWrite()">Click
here</A>
</BODY>
</HTML>
Note we call the function using top.RightWrite(). If we simply said RightWrite()
the browser would look for the function in the same document as the link that
called it. But since our function resides in the topmost frameset, we must specify
top.RightWrite(). A little confusing maybe, but not too too difficult.
Try it.
Study that last example
until you understand exactly what's going on.
One thing that should be noted is that we just wrote "Joe" to the
document, not any HTML tags. If you look at the source of that frame after it's
written, you will simply find "Joe"... no <HTML>, <HEAD>
or <BODY> tags. That stuff would only be there if we wrote it as well...
window.rightframe.document.clear();
window.rightframe.document.open();
window.rightframe.document.write("<HTML>");
window.rightframe.document.write("<HEAD><TITLE></TITLE></HEAD>");
window.rightframe.document.write("<BODY>");
window.rightframe.document.write("Joe");
window.rightframe.document.write("</BODY>");
window.rightframe.document.write("</HTML>");
window.rightframe.document.close();
While it's usually a fine idea to write a complete HTML document, we can probably
skip it for now for the sake of simplicity.
Exercise: Alter the last example to send a value to the function from
the link. Hint: you'll run into the nested quotes problem again, although this
time it's a little different. The fix here is to use single quotes (') for the
value you wish to pass...
<A HREF="javascript:top.RightWrite('Frank')">Click here</A>
While the browser is confused by nested quotes, it can handle a set of single
quotes within a set of double quotes.
Exercise: Find a way to throw up a prompt box that asks for a name (or
whatever) and then writes that user input to the right frame.
Exercise: Expand on your last exercise by also asking for not only the
user's name, but throw up additional prompt boxes asking for his age and a hex
background color (such as CC99FF). Re-write the right frame to say something
like "Paul is 22 years old" and make the document render with the
chosen background color (do it by writing a BODY tag, don't just change the
color via javascript). While you're at it, place a default color in the prompt
box like so.
Exercise: Instead of throwing up prompt boxes, use a simple form with
3 input boxes and a button. When the button is pressed, values are snagged from
the inputs and used to re-write the right frame.
Be persistant with this one. It draws on several items we've learned in previous
lessons and is not as simple as it appears. If it doesn't work, you'll find
clues in the error messages that are generated. Hint: I find the error messages
generated by Netscape are FAR more useful than those generated by Internet Explorer.
Personally I use Netscape as an authoring environment, then check pages and
scripts in Explorer.
Hang in there until you complete this exercise and get it to work as expected
(Even if it takes you three days!). Some of the most useful and intensive learning
comes when you are struggling with some problem. Reminds me of a line from Dog
Day Afternoon... "Can't you see I'm dyin' over here?" You'll do your
best learning when you're "dyin'".
Exercise: Using simple math in the script, calculate how many hours old
the user is and add that to your page re-write. Something like "That's
over 1000 hours old!"
| Next>> | ||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||