如何阻止iframe闪烁? [英] How to stop the iframes from blinking?
问题描述
我有一个html页面，其中有一个 div . div内有一个 iframe ，
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>
在javascript函数中，我正在动态更改iframe的src.
In javascript function I'm changing the src of the iframe dynamically.
window.frames['biframe'].document.location.href="105.htm";
$('div1').style.display="block";
单击按钮将调用以上两行，将显示div并加载iframe.
The above 2 lines will be called in a button click, the div will be displayed and the iframe will be loaded.
问题::单击按钮后，iframe会闪烁，直到正确显示为止.闪烁发生的时间很短，但是当我每次单击按钮时要显示不同的来源时，都会非常恼火.现在，我有5个按钮.
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>
...但是没有用.
请提出一个解决此问题的好方法.
Please suggest a good solution to end this problem.
注意:此页面不能使用JQuery/任何JS库(不允许使用).
Note : JQuery/any JS library cant be used in this page (I'm not allowed to).
推荐答案
感谢Paul Irish和他的Surefire DOM元素插入，以及Ryan Seddon和他的关于插入有作用域的样式元素的文章，我们有以下内容:
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);
}
})();
只要在任何页面上(<head>中)包含白色闪光问题，该问题便会得到解决.只需注意，我们在这里使用window.onload，因此，如果您的页面也在某个地方使用了window.onload，请将它们组合起来.
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.
这篇关于如何阻止iframe闪烁?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
