Snippets Table of Contents | About Snippets | Faughnan Home Page

JavaScript Dynamic Framesets (frames) and Recommended JavaScript Books (snippet)

Dynamic HTML generation with JavaScript is hard enough, dynamic framesets are even trickier, and mixing dynamic and static HTML and framesets is like juggling anti-matter. This snippet presents two approaches, the first using JavaScript URLs and the .Location assignment, the second using .write() methods operating on the Document object. We also recommend books.

In both cases there's a real bug in Netscape 2.x and 3.x that one must work around. This code uses a button in a frame to trigger an event handler that overwrites the document containing the button. This crashes NS 2.x and 3.x. The work around requires that the event handler be wrapped by a setTimeout function. Odd, but necessary.

These scripts have been tested under NS 3.0x Win and Mac.

Recommended Books

In solving these problems I used two books which I recommend. I also add here the name of a third text which I will be purchasing soon

Dynamic Framesets: JavaScript URL and .Location Method

This method uses javascript urls. It is similar to coordinated frameset updating using static framesets.

There are two files: index.html and button.html. After loading index.html you will see two columns, each with a button and hyperlink. Clicking on the button splits the left column into two rows. Clicking again replaces the left sided framesets with themselves. I store my frameset string in the top Window's object hierarchy to ensure it is not stored in the overwritten frame (may be an unnecessary precaution).

Note the use of the setTimeout wrapper, the way the nested quotes are "escaped", and the technique for launching an event handler from an HREF link.

<HTML><HEAD><TITLE>INDEX.HTML: Setup Starting Framesets</TITLE>
<SCRIPT language="JavaScript">
function setSubFrames(upSize, upper, lower)
top.newframe =
'<FRAMESET rows="' + upSize + ',*" BORDER=3>' +
'<FRAME src="' + upper + '"' + ' NAME="upper">' +
'<FRAME src="' + lower + '"' + ' NAME="lower">' +

<!-- If want to create a window in which all visible frames
appear to be changing, create two top frames, one
hidden and one visible. set cols = 100%,*. --!>
<FRAMESET cols="50%,*" BORDER=3>
<FRAME src="button.html" NAME="leftframe">
<FRAME src="button.html" NAME="rightframe">


<INPUT TYPE="SUBMIT" NAME="Action1" VALUE="HitMe" onClick="setTimeout('top.setSubFrames(\'50%\',\'button.html\',\'button.html\')', 0);">

<P><A HREF="" onClick="setTimeout('top.setSubFrames(\'50%\',\'button.html\',\'button.html\')', 0); return false">click me</A>


Dynamic Framesets: Document Write() Method

To get this code to work reliably, I think you'd need to adopt the same techniques that I used in the preceding JavaScript URL method.

n ='','myWindow','resizable,width=200,height=200');

n.document.write('<frameset rows=40%,60%>');
n.document.write('<frame src="about:blank" name="f1">');
n.document.write('<frame src="about:blank" name="f2">');
n.document.close(); // This is critical. It was missing from the code in the book.

n.document.write('<frameset cols=40%,60%>');
n.document.write('<frame src="about:blank" name="f1">');
n.document.write('<frame src="about:blank" name="f2">');

Confidence (1 to 3): 3. Date Created: 2/19/97. Last Revised: 4/1/98. Expires: . Language: english. Domain: .world. ID: 4. Topic: computer Internet. Subtopic: JavaScript. Keywords: programming, document.write(), Netscape, browser, HTML, javascript URL; Internet Explorer; JScript; synchronization; timing; race conditions.

Last Revised: 4/1/98. Author: John G. Faughnan. Disclaimer: The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been approved by the University of Minnesota.