Can I change or control the color of the IFRAME ar

Question

Possible Duplicate:
fb like button creates a white background on page onload in all ie versions

I have a site where portions of the content are loaded into IFrames.

The problem I'm having is that the inside content of the iFrame is white until the page itself loads, and the content has a different background color (blue, in this case). So I have these white squares on the screen until the contents load.

Is there any way to specify what color the empty IFrame should render as until it has content?

Or am I taking the wrong tack here - is there a good way to keep the page from rendering until the contents are ready to be displayed?

UPDATE: Looks like the "white area" bit I'm describing is IE-specific.

Answer 1

It's not too hard:

<iframe id="IFR" src="time.php" style="background-color: #f00;" />

Edit: I neglected to test in IE -- it does work in FireFox. Example at: http://beta.tagcloud.com/contain.html

The example demonstrates that the page quickly switches to all red, and then when the iframe loads (in 5 seconds), it switches to black.

Answer 2

You could perhaps set the iframe's document and set its style before loading your content.

Or you can use Ajax and not have these issues. =] (Assuming if it's appropriate for the task, of course.)

Answer 3

Simpliest way to fix this to just not show the iframe until it is ready. That way you can set whatever background you want under the iframe. You set a background and prevent showing the iframe until loaded like so:

<div style="background-color:#XXXXX">
  <iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
</div>

The only downside is if your visitor has js turned off they aren't going to see the iframe. If that is a concern for you check out http://css-tricks.com/prevent-white-flash-iframe/

Answer 4

This was driving me nuts, but I actually found a solution that seems to work in IE6 and 7. Haven't tested in other browsers, but Firefox seems to do it properly anyway.

The problem is solved if the iframe isn't displayed when loading, but an iframe seems to fire the "onload" immediately so after putting in an alert, I noticed it fires the onload twice, once at page load, then again once the iframe page loads so...

<iframe id="theFrame" src="frame.html" style="display:none;" onload="loadFrame();"></iframe>

//and here is the associated javascript
loadCount = 1;
function loadFrame() {
  if(loadCount > 1) { //this keeps the script from displaying the frame on the first fire
    document.getElementById('theFrame').style.display='';
    return;
  }
  loadCount++;
}