View Full Version : target trouble positioning dynamic iframe

Scott Monahan
Feb 19th, 2008, 11:28 PM
I'm building a static web page (client) that harvests user selections, passing them as an href substring --- conveyed via a JavaScript function, callToServer() --- to a companion page (server) that generates content for the embedded video iframe viewer on the front page. My blueprint code for synchronizing the duet (and thus avoiding the unpleasantries of numerous page changes and history accretion) comes from developer.apple.com/internet/webcontent/iframe.html however, the browser instances appearing therein betray some obsolescence. My problem is that the Apple routine insists on initializing an IFrame Object (for which I configure an ID tag of my choosing) with document.creation then dumps the result at the </body> of the main page, leaving me unable to invoke the mid-page position I need for the viewer. No combination of commenting out the unwanted lines or messing with the code to the abilities I can, have yielded success. I have distilled the essence of my targeting dilemma viewable at http://onter.net/client.html along with hidden companion server.html that generate some diagnostics on the fly. Before the problem routine is first called, my preferred iframe position is populated with a virgin snapshot of the iframe id "theShow" where I want it, centered, midpage. Once the user clicks any one of three increment value buttons, however, and the callToServer function initializes the Object iframe, with id "theShow", a dynamic mirror appears below and left justified, and keeps refreshing with every subsequent user increment.

Here's the problematic routine from Apple, with my modest configs:

var IFrameObj; // our IFrame object
function callToServer(player,counter,frame) {
if (!document.createElement) {return true};
var IFrameDoc;
var URL = 'server.html?p='+ player +'&c='+ counter +'&f='+ frame;

if (!IFrameObj && document.createElement) {
// create the IFrame and assign a reference to the
// object to our global variable IFrameObj.
// this will only happen the first time
// callToServer() is called
try {
var tempIFrame=document.createElement('iframe');
IFrameObj = document.body.appendChild(tempIFrame);

// if (document.frames) {
// this is for IE5 Mac, because it will only
// allow access to the document object
// of the IFrame if we access it through
// the document.frames array
// IFrameObj = document.frames['theShow'];
// }
} catch(exception) {
// This is for IE5 PC, which does not allow dynamic creation
// and manipulation of an iframe object. Instead, we'll fake
// it up by creating our own objects.
iframeHTML='\<iframe id="theShow" style="';
IFrameObj = new Object();
IFrameObj.document = new Object();
IFrameObj.document.location = new Object();
IFrameObj.document.location.iframe = document.getElementById('theShow');
IFrameObj.document.location.replace = function(location) {
this.iframe.src = location;

if (navigator.userAgent.indexOf('Gecko') !=-1 && !IFrameObj.contentDocument) {
// we have to give NS6 a fraction of a second
// to recognize the new IFrame
return false;

if (IFrameObj.contentDocument) {
// For NS6
IFrameDoc = IFrameObj.contentDocument;
} else if (IFrameObj.contentWindow) {
// For IE5.5 and IE6
IFrameDoc = IFrameObj.contentWindow.document;
} else if (IFrameObj.document) {
// For IE5
IFrameDoc = IFrameObj.document;
} else {
return true;

return false;

Any advice on how to preserve the refresh iframe functionality while targeting content to where I want it, would be enormously appreciated. By the way, the actual prototype page in progress can be viewed for its cosmetics and crude user interface, so far, at http://onter.net/videos_rev.html

Scott Monahan
[email protected]

Scott Monahan
Feb 21st, 2008, 09:52 PM
To all,

I discovered the solution to my problem a short time ago at domscripting.com/blog/display/99

All I needed to do was replace line 17 in the Apple source code:
IFrameObj = document.body.appendChild(tempIFrame);

With these two lines:
var container = document.getElementById("where");
IFrameObj = container.appendChild(tempIFrame);

I've got some reference movie and JS remote calls remaining to do before I can go live with the prototype page at onter.net/videos_rev.html in a day or two, but this is simply an advisory that the solution has been found and I have taken down the diagnostic pages previously posted as client.html and server.html

Scott Monahan

Scott Monahan
Feb 21st, 2008, 09:55 PM
One more item I forgot to mention. I removed the hard-coded <iframe></iframe> tag at the desired position, substituting the recommended target <div id="where"></div> to tell the script where to poke the tempIFrame.