Question

我有一个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";

点击按钮将调出上述2行，将显示div并加载iframe。

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

解决方案：我尝试使用以下某个论坛中提供的解决方案，

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

......但没有奏效。

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

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

Answer 1

感谢Paul Irish和他的Surefire DOM Element Insertion和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，所以如果您的页面也在某处使用它，请将它们合并。

Answer 2

最初在正文部分中，我将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。这意味着iframe将在其加载期间隐藏，避免白色闪烁。

如何阻止iframe眨眼？

2 个答案: