14.12 Inserting and Populating an iframe Element

NN 6, IE 5

14.12.1 Problem

You want to create an iframe element, insert it into the current document, and place content into the iframe.

14.12.2 Solution

This task requires a little more than just creating elements and appending them to the document. This is a case in which one of the elements you create—an iframe—requires a document tree context before you can stuff it with data. The following code takes place in the global space. If you bury it inside a function, predeclare the newIframe variable as a global.

First, we are going to append an iframe to the end of the body element, and then we will put a dynamically generated form into the iframe. Begin the expected way, by creating the iframe element in memory, and inserting the empty iframe into the document:

// create a frame element node
var newIframe = document.createElement("iframe");
newIframe.setAttribute("id","newIframe");
// insert it into the document to give it context;
// set a tiny size, or display:none if you don't want to see it
document.body.appendChild(newIframe);

Next, obtain a reference to the document context that is needed for creating elements that are to go inside the iframe. For IE, that context is the document object inside the iframe's window object; for others, the main document is the appropriate context:

// get the browser-appropriate document context for content creation
if (navigator.appName =  = "Microsoft Internet Explorer") {
    var doc = newIframe.contentWindow.document;
} else {
    doc = document; 
}

Now create the form and elements inside the form using the browser-specific document context. Unfortunately, IE tends to race ahead with its processing of script statements, sometimes causing statements to execute before the components under construction arrive on the scene. Therefore, it is necessary to put the brakes on processing with a setTimeout( ) method (set to zero delay), so that the final action can take place in a stable environment:

// create a form node within suitable document context
var newForm = doc.createElement("form")
newForm.setAttribute("id","sendform");
// create an input element node in the same context
var newField = doc.createElement("input");
newField.setAttribute("id","alldata");
newField.setAttribute("type","text");
// insert the field into the form
newForm.appendChild(newField);
// create and insert more form controls here
...
// insert the form into the iframe via delay
setTimeout("finishIframe( )", 0);
}

Finally, the form can be inserted into the body of the iframe's document:

// complete content insertion
function finishIframe( ) {
    newIframe.contentWindow.document.body.appendChild(newform);
}

14.12.3 Discussion

If you code the HTML for the iframe and its content in a regular HTML page, the elements for the form simply exist between the start and end tags of the iframe. This leads you logically to imagine that creating and inserting a form into a new iframe would use the same kind of document tree insertion that you see in Recipe 14.9 and Recipe 14.10. The difference is that an iframe element is a type of window object, just as if it were a different frame in a frameset. Therefore, to work with the iframe's content in a script, you must be able to access the document that lives inside the iframe. When your scripting context is that of the main document and all you have is a reference to the iframe, the avenue to the iframe's document is via the iframe's contentWindow—a reference to the window in the frame. That window doesn't exist in the object model until the new iframe is inserted into the document.

This roundabout way of reaching the content of an element is limited to those elements that contain window and document objects: frame elements and iframe elements. An object element also has a level of indirection, but no window is involved. Instead, an object element (in the W3C DOM, but not supported in IE as of Version 6) has a contentDocument property. You won't have to worry about this situation for any other HTML elements.

14.12.4 See Also

Recipe 14.3 for using an iframe to blend separate HTML documents together; Recipe 14.9 for creating a new element; Recipe 14.10 for creating element text content.