7.9 Setting Frameset Specifications Dynamically

NN n/a, IE 5.5(Win)

7.9.1 Problem

You want to use a script to build an entirely new set of frames within the current frameset.

7.9.2 Solution

Use either of the makeNewFrameset( ) functions described in the Discussion to empty the current set of frames and install a new set. The current framesetting document's scripts and variables remain intact throughout the process. Invoke the function from a user interface element (button or link) or from any other function in one of the frames:

parent.makeNewFrameset( );

7.9.3 Discussion

The makeNewFrameset( ) function shown in Example 7-2 converts a frameset that is initially delivered as one set up in two columns to a frameset with different documents in a two-row frameset. Due to idiosyncrasies in a variety of browsers that should support this functionality, the function operates only in IE 5.5 or later for Windows.

Example 7-2. A function to generate a new frameset for IE 5.5 or later

function makeNewFrameset( ) {
    var newFrame1 = document.createElement("frame");
    newFrame1.id = "newFrame1";
    newFrame1.name = "newFrame1";
    newFrame1.src="altNavBar.html"
    var newFrame2 = document.createElement("frame");
    newFrame2.id = "newFrame2";
    newFrame2.name = "newFrame2";
    newFrame2.src="altHome.html"
    
    var frameset = document.getElementById("masterFrameset");
    while (frameset.childNodes.length > 0) {
        frameset.removeChild(frameset.firstChild);
    }
    frameset.cols = null;
    frameset.rows = "80, *";
    frameset.appendChild(newFrame1);
    frameset.appendChild(newFrame2);
}

It is important to clean out the existing node tree and associated properties before repopulating it with new elements. In this function, the new frame elements are created in memory only. While they stand by, the original frameset is first cleansed of its previous child nodes. Thus, even if the main frameset has a more complex frame construction inside it, everything is gone after the while loop does its job. Because we're changing the main frameset from a column- to row-oriented frameset, the original setting for the cols attribute is cleared out before assigning fresh values to the rows property. At last, the new frame elements are appended to the frameset.

If IE 6 is your only target browser for this kind of application, you might consider using a W3C DOM DocumentFragment object as a temporary container for the frame elements. The revised function is shown in Example 7-3.

Example 7-3. A function to generate a new frameset for IE 6 or later

function makeNewFrameset( ) {
    var frag = document.createDocumentFragment( );
    var newFrame= document.createElement("frame");
    newFrame.id = "newFrame1";
    newFrame.name = "newFrame1";
    newFrame.src="altNavBar.html"
    frag.appendChild(newFrame);
    newFrame = document.createElement("frame");
    newFrame.id = "newFrame2";
    newFrame.name = "newFrame2";
    newFrame.src="altHome.html"
    frag.appendChild(newFrame);
    
    var frameset = document.getElementById("masterFrameset");
    while (frameset.childNodes.length > 0) {
        frameset.removeChild(frameset.firstChild);
    }
    frameset.cols = null;
    frameset.rows = "30%, *";
    frameset.appendChild(frag);
}

For a backward-compatible solution, you can always fall back on the document.write( ) method of the parent or top frame. Assemble the entire content of a new framesetting document as one string. Then issue one top.document.write( ) method followed by a top.document.close( ) method. All vestiges of the original frameset (including script variables in the frameset and frames) disappear, and are replaced by the new frameset.

7.9.4 See Also

Recipe 7.8 for resizing frames; Recipe 14.2 for using document.write( ) to generate a new page (and techniques for including script libraries in such a page).