如何阻止 iframe 闪烁？答案

【问题标题】：How to stop the iframes from blinking?如何阻止 iframe 闪烁？
【发布时间】：2012-11-15 11:45:39
【问题描述】：

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

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

在 javascript 函数中，我正在动态更改 iframe 的 src。

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

上面两行会在按钮点击中被调用，显示div并加载iframe。

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

已尝试的解决方案：我尝试了一些论坛中给出的以下解决方案，

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

...但没用。

请提出一个好的解决方案来结束这个问题。

注意：这个页面不能使用 JQuery/任何 JS 库（我不允许）。

【问题讨论】：

您必须先将visibility 重新设置为隐藏，然后才能为其分配新网址。另外，为什么要修改 iframe 的位置对象？只需更改 iframe 的 src 即可。
@Passerby 谢谢！！我猜对了。现在我明白了这个技巧是如何工作的，并且已经回答了我自己的问题。

标签： javascript html iframe

【解决方案1】：

感谢 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);
    }

})();

只要在任何页面（<head>）包含白色闪光问题，它就会得到解决。请注意，我们在这里使用的是 window.onload，所以如果您的页面也在某处使用它，请将它们组合起来。

【讨论】：

【解决方案2】：

最初在 body 部分中，我将 iframe 的可见性设置为隐藏（不必要）。稍后在按钮单击功能中，我将可见性保持为隐藏状态，并动态更改了 src 属性。

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

成功了！！

示例代码如下，

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

...在按钮单击事件中调用以下行，

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

...后面会调用下面的函数，

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

发生了什么？

当我单击按钮时，我的 iframe 将被隐藏。我将分配 src 属性。加载 iframe 后将调用我的 iframe 加载事件，这将显示 iframe。这意味着 iframe 将在其加载期间隐藏，避免白闪。

【讨论】：