JavaScript and DHTML Cookbook-JavaScript and DHTML Cookbook

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.

[ Team LiB ]