0

我有一个 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 库（我不允许）。

4

2 回答 2

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，所以如果您的页面也在某处使用它，请将它们组合起来。

于 2014-10-02T14:13:00.257 回答
0

最初在正文部分，我将 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 将在其加载期间隐藏，避免白闪。

于 2012-11-15T12:10:19.170 回答