Saturday, May 23, 2009

Handling iframe background color issue in IE

It seems IE (Internet Explorer) is taking White as default background color for iframe.

And, it looks like we couldn't change this default background color in IE.

I have tried by using inline style and CSS class. But it didn't help to change the background color of iframe.

Anyway we can set the background color of iframe by specifying background color for the webpage loaded within the iframe. But it will create an unwanted flickering when loading the page.

Find below the workaround to handle this issue.

First we should understand why this flickering happens.

Initially the background color of iframe will be White. Once after page loading is completed the background color will become the actual background (e.g black) specified the HTML file.

The change of color in short time period triggers flickering.

So we need to hide the iframe till the page is getting loaded to avoid this flickering.

Provide one div tag as below to hide the iframe.

<div id="iframediv" style="display:none">
<iframe frameborder="0" src="test.html" scrolling="auto"
height="100%" width="100%"></iframe>

Make this div tag visible once the page is loaded. i-e set the display as block during body onload event as below.

<body onLoad="document.getElementById('iframediv').style.display='block';">

Now, you won't see the flickering of color on loading the page.

More Articles...

No comments:

Search This Blog