如何阻止iframe闪烁？

我有一个html页面，其中我有一个div。在div里面有一个IFRAME，如何阻止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库都不能用在这个页面中（我不允许）。

来源

2012-11-15 Anto

您必须重新设置'visibility'才能隐藏，然后为其分配新的网址。另外，你为什么要修改iframe的位置对象？只要改变iframe的'src'就行。 – Passerby

@Passerby谢谢！我说得对。现在我明白这个技巧是如何工作的并回答了我自己的问题。 – Anto

最初在正文部分我设置了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-15 12:10:19 Anto

感谢保罗爱尔兰和他的神火的DOM元素插入和瑞安塞登和他的文章中插入范围的风格元素，我们有这样的：

// 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-02 14:13:00

如何阻止iframe闪烁？

回答

相关问题