Javascript 如何阻止iFrame闪烁？

我有一个html页面，其中有一个div。div内部有一个iframe

<div id="div1">
<iframe id="biframe" src="" allowtransparency="true" application="yes" >
</iframe>
</div>

单击按钮将调用上述两行，将显示div并加载iframe

问题：单击按钮时，iframe会在正确显示之前闪烁。闪光出现的时间很短，但当我要在每次点击按钮时显示不同的来源时，会非常恼人。现在我有5个按钮

已尝试解决方案：我在某个论坛上尝试了以下解决方案

<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>

…但没有起作用

请提出解决这个问题的好办法

---

注意：JQuery/任何JS库都不能用于此页面（我不允许）

最初在正文中第一部分将iframe的可见性设置为隐藏（不必要）。稍后在ButtonClick函数中，我保持了隐藏的可见性，并动态更改了src属性

 window.frames['biframe'].document.location.href="105.htm";
 $('div1').style.display="block";

我创建了另一个函数以使iframe可见，并在iframe的onload事件中调用了该函数

成功了

示例代码如下所示

<div id="Bframe">
<iframe id="biframe" style="visibility:hidden;" src="" allowtransparency="true" application="yes" onload="showiframe()">
</iframe>
</div>

…稍后将调用下面的函数

function showiframe()
{
    $('biframe').style.visibility="visible";
} 

发生了什么事？

当我单击该按钮时，我的iframe将被隐藏。我将分配src属性。 我的iframe加载事件将在加载iframe后调用，该事件将显示iframe。

---

这意味着iframe将在加载期间隐藏，避免出现白色闪烁。

多亏了Paul Irish和他的Surefire DOM元素插入，以及Ryan Seddon和他关于插入作用域样式元素的文章，我们有了：

// 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 = '&shy;<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);
    }

})();

//防止变量为全局变量
（功能（）{
/*
1.注入CSS，使iframe不可见
*/
var div=document.createElement（'div'），
ref=document.getElementsByTagName（'base'）[0]||
document.getElementsByTagName（'script'）[0]；
div.innerHTML='­；iframe{visibility:hidden；}'；
ref.parentNode.insertBefore（div，ref）；
/*
2.加载窗口时，删除该CSS，
使iframe再次可见
*/
window.onload=函数（）{
div.parentNode.removeChild（div）；
}
})();

---

只要在任何有白光闪现问题的页面（在

中）包含该选项，它就会得到解决。请注意，我们在这里使用的是window.onload，因此如果您的页面在某些地方也使用了window.onload，请将它们组合起来。

在为其分配新url之前，您必须将

可见性

重新设置为隐藏。另外，为什么要修改iframe的位置对象？只需更改iframe的

src

。@过路人谢谢！！我说对了。现在我明白了这个把戏是如何运作的，并且回答了我自己的问题。

// 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 = '&shy;<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);
    }

})();