Javascript 刷新iframe内容而不使用白色闪光灯

我的站点中有一个iframe，它必须每秒重新加载一次（它只是为了数据分析而重新加载简单的HTML）。这会导致每次重新加载时都出现令人讨厌的白色闪烁

我花了数小时的研究来试图移除这个闪光灯。这里是我所拥有的（不起作用），它创建一个新的iframe，将其添加到DOM中，然后删除旧的iframe，有效地重新加载页面。但仍会闪烁白色：

    $( document ).ready(function() {
        setInterval(function() {
            var container = document.getElementById('bottom-frame-container');
            var source = container.getElementsByTagName('iframe')[0];
            var newFrame = document.createElement('iframe');

            for (i = 0; i < source.attributes.length; i++) {
                var attr = source.attributes[i];
                newFrame.setAttribute(attr.name, attr.value);
            }

            newFrame.style.visibility = 'hidden';
            newFrame.id = 'bottom-frame';
            container.appendChild(newFrame);

            newFrame.style.visibility = 'visible';
            container.removeChild(container.getElementsByTagName('iframe')[0]);
       }, 1000);
   });

$（文档）.ready（函数（）{
setInterval（函数（）{
var container=document.getElementById（'bottom-frame-container'）；
var source=container.getElementsByTagName（'iframe'）[0]；
var newFrame=document.createElement（'iframe'）；
对于（i=0；i

iframe代码只是：

<div id="bottom-frame-container">
    <iframe id="bottom-frame" width="100%" height="60%" frameborder="0" allowTransparency="true" src="http://10.62.0.15/haproxy?stats">
</div>

---

我完全愿意接受任何建议或替代方法，我有点绝望了

我将如何处理这个问题：在iframe的顶部有一个'load'div，以防止看到闪烁。
然后，在加载之前，淡入警告-->当淡入完成时，触发加载-->当加载完成时，淡出警告

小提琴在这里：

html是：

 <iframe
     width=500px
     height=300px
     id = 'myFrame' 
     style='position:absolute;top:0;'
             src = 'http://jsfiddle.net/' 
    >      
    </iframe>

  <div id = 'myLoad'
       style='float:top;top:0;
              position:absolute;
              background-color:#CCC;
              min-width:500px; 
              min-height:300px;

             '>
    <div style='position:absolute;top:130px;left:200px;'>
        <b>  Loading... </b> 
    </div>               
  </div>

</div>

---

显然，它需要对外观进行微调，如果您希望用户能够单击iframe，您必须禁用top div上的指针，但这应该可以让您继续使用。

您可以将两个iframe放在页面上，并使用CSS隐藏和显示它们吗。这对页面的影响比删除和插入元素到DOM中要小得多

然后，在显示新的on时，向这两个事件添加一个onload事件，该事件将触发当前iFrame隐藏和重新加载？使用RequestAnationFrame有助于减少闪烁。代码看起来像这样

var currentIFrame = 1;

$('iframe').on('load',function(){
    $(this).show()
    $('#iframe'+(currentIFrame=1-currentIFrame)).hide().delay(1000).reload();
})

---

这样，您只需在确定内容已完全加载后进行切换。

我知道这是一个老问题，但我真的不确定为什么有人没有发布这个显而易见的解决方案

只需将此javascript代码粘贴到任何具有iframe的页面中

<script>
// Preventing whiteflash in loading iframes.     
(function () {
    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);
    window.onload = function() {
        div.parentNode.removeChild(div);
    }
})();
</script>

//防止加载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）；
window.onload=函数（）{
div.parentNode.removeChild（div）；
}
})();

---

它将简单地重新传递任何iframe可见性：隐藏，直到加载iframe为止，然后使其可见。

如何

iframe changeurl=function（）{fade out iframe container-}

-

iframe.onload=function（）{fadebackiniframecontainer}

？（伪）flash是由于每秒都要删除和注入元素，你会弄乱文档流，这会让人迷失方向。在理想情况下，一些通过web服务呈现数据的AJAX会更理想。。。该页面至少在您的域中吗？@RobSedgwick他还应该绝对地将iFrame放置在彼此的顶部。真正奇怪的是，您每秒重新加载一整页。一定有更好的办法。。。（这里通常使用AJAX来解决此类场景）

<script>
// Preventing whiteflash in loading iframes.     
(function () {
    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);
    window.onload = function() {
        div.parentNode.removeChild(div);
    }
})();
</script>