Elias Saba’s Blog

I just came across this little quirk in Internet Explorer.

I have a page with two frames in a frameset that looks like this:

<frameset rows=”50%, 50%,” border=”0″ frameborder=”0″ framespacing=”0″>
     <frame border=”0″ frameborder=”0″ name=”firstFrame” src=”http://one.com”></frame>
     <frame border=”0″ frameborder=”0″ name=”secondFrame” src=”http://www.two.com”></frame>
</frameset>

Inside the first frame I have a javascript function which creates a new frame in the parent and appends it. That function looks like this:

function addFrame(){
     var newFrame = parent.document.createElement(“frame”);
     newFrame.name = “thirdFrame”;
     newFrame.src=”http://www.three.com”;
     parent.document.body.appendChild(newFrame);
     parent.document.body.rows=”34%,33%,33%”;
}

That function worked perfectly in Firefox 3.6.15, Chrome 10.0.648.133, and Safari 5.0.4. However, it did not work in Internet Explorer 8. The problem is with the last two lines of the function. In IE, you need to first “make room” for the new frame before appending it. So the corrected function has the last two lines flipped and looks like this:

function addFrame(){
     var newFrame = parent.document.createElement(“frame”);
     newFrame.name = “thirdFrame”;
     newFrame.src=”http://www.three.com”;
     parent.document.body.rows=”34%,33%,33%”;
     parent.document.body.appendChild(newFrame);
}