I have a html page in which i have a div. Inside the div there is an iframe,
<div id="div1">
<iframe id="biframe" src="" allowtransparency="true" application="yes" >
</iframe>
</div>
In javascript function I'm changing the src of the iframe dynamically.
window.frames['biframe'].document.location.href="105.htm";
$('div1').style.display="block";
The above 2 lines will be called in a button click, the div will be displayed and the iframe will be loaded.
Problem : When the button is clicked the iframe blinks before getting displayed properly. The flash occurs for a very short time, but very irritating when I'm going to display different source in each button click. For now I have 5 buttons.
Solution Tried : I tried with the below solution given in some forum,
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
...but didn't work.
Please suggest a good solution to end this problem.
Note : JQuery/any JS library cant be used in this page (I'm not allowed to).
Thanks to Paul Irish and his Surefire DOM Element Insertion and Ryan Seddon and his article on inserting scoped style elements, we have this:
// Prevent variables from being global
(function () {
/*
1. Inject CSS which makes iframe invisible
*/
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '­<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
/*
2. When window loads, remove that CSS,
making iframe visible again
*/
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
Just include that on any page (in the <head>) with the white flash problem and it will be solved. Just note that we're using window.onload here, so if your page also uses that somewhere, combine them.
Initially in the body part I set the iframe's visibility to hidden (unnecessary). Later in the button click function I maintained the visibility hidden, and changed the src attribute dynamically.
I created another function to make the iframe visible and called that function in the onload event of the iframe.
And it worked!!
The sample code is as follows,
<div id="Bframe">
<iframe id="biframe" style="visibility:hidden;" src="" allowtransparency="true" application="yes" onload="showiframe()">
</iframe>
</div>
...called the below lines in the button click event,
$('biframe').style.visibility="hidden";
window.frames['biframe'].document.location.href="105.htm";
$('Bframe').style.display="block";
...And the below function will be called later,
function showiframe()
{
$('biframe').style.visibility="visible";
}
What is happening?
When I click the button, my iframe will get hidden. I will assign the src attribute.
My iframe load event will get called after iframe is loaded which will show the iframe.
That means iframe will be hidden in its loading period, avoiding white flash.
