Working with IFrames

[cyshaw]

I'm trying to work with IFrames with JavaScript and DOM. I have a HTML page with image properties on it and one IFrame with the image in it. When the user changes the properties on the side the image refreshes to show a preview. The problem I'm having is adding DOM elements to the IFrame.

I'm trying to add a <div> to the IFrame window.

I'm using:
var curDiv = window.frames['imgFrame'].document.getElementById("currentDiv");

alert(curDiv);

var newDiv = window.frames['imgFrame'].document.createElement("newDiv");
curDiv.appendChild(newDiv);

It works for IE (the alert returns the object); however, I can't get the object using Firefox 1.5. I get the JS Error curDiv does not have any properties. Why isn't window.frames working with Firefox?

Please help.

[david_kw]

You don't show your HTML but I can speculate you have

<iframe id="imgFrame"></iframe>

but for FF I believe you need to define a name too to use that kind of frame addressing. So try changing it to

<iframe id="imgFrame" name="imgFrame"></iframe>

david_kw

[cyshaw]

David,

Thanks. You were absolutely correct. FireFox Requires you to define name within the iFrame.

[cyshaw]

I was able to insert <div>s in the IFrame window. However, I tried to move the image inside of the new div. I believe the image is inside of the <div>; however, in Internet Explorer the image is not inside of the div. The div is above the image. Like the div will not grow in height past the image. HOWEVER, in FireFox the div fills out nicely and you can see the div around the image.

Any suggestions why this is? It is like the div will not auto expand to the image in IE.

[glenngv]

Can you post the related code?

[cyshaw]

Thanks for the response; however, I got it working. I had a typo.