7.1 Creating a Blank Frame in a New Frameset
NN 2, IE 3
7.1.1 Problem
You want a frameset
definition to include a blank frame (as a clean slate, awaiting a
menu selection), but without having to create a blank HTML document
on the server.
7.1.2 Solution
The following framesetting page demonstrates the technique of using a
script-generated blank page in one of two frames:
<html>
<head>
<script type="text/javascript">
<!--
function blankFrame( ) {
return "<html><body></body></html>";
}
//-->
</script>
</head>
<frameset rows="50, *">
<frame name="frame1" id="frame1" src="navSlice.html">
<frame name="frame2" id="frame2" src="javascript:parent.blankFrame( )">
</frameset>
</html>
You can apply the
javascript: pseudo-URL to the
src attribute of any frame
element.
7.1.3 Discussion
As you can probably deduce from the example in the Solution, you can
use JavaScript to create any HTML as the initial content of a frame.
For example, if you wanted to use a special background color of the
blank frame to be the same as your HTML pages in the frameset, you
could include the bgcolor attribute of the
<body> tag inside the blankFrame(
) function:
function blankFrame( ) {
return "<html><body bgcolor='#ccee99'></body></html>";
}
Using the javascript: protocol with a
src attribute is a somewhat controversial subject.
On the one hand, it is the only backward-compatible way to let
dynamic content fill an element that normally gets its content from a
file or CGI process on the server. But this kind of URL fails if the
user has JavaScript disabled or the browser doesn't
support JavaScript. Most browsers with JavaScript disabled will
simply leave the frame area blank, but the browser may be in an
unstable state. Therefore, deploy this technique only if you know
your audience has script-enabled browsers.
Notice that the reference to the function points to the parent frame.
This is required because the execution of the
javascript: pseudo-URL occurs inside the context
of the frame. In the frame's eyes, the function is
located in the parent, and the reference must include that pointer.
As an aside, a common mistake for scripting beginners is to replicate
the javascript: URL in event handlers. I don't
know where this came from, but it is wrong, redundant, and sometimes
disastrous. The javascript: protocol belongs only
where a URL is normally assigned. Thus, it is appropriate in
assignments to src and href
attributes in tags. Do not use it in event handlers. Period.
7.1.4 See Also
Recipe 7.2 for modifying a frame's content after the
frameset loads; Recipe 14.1 for creating dynamic content during the
loading of a single page.
|