Question

我的网站中有一个必须每秒重新加载的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);
   });

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>

我对这里的任何建议或替代方法完全开放，我有点绝望了！

Answer 1

在这里，我将如何处理这个问题：让一个人加载＆＃39; iframe顶部的div，以防止看到眨眼。
然后在加载之前你将fadein警告 - ＆gt;当fadein完成时你触发加载 - ＆gt;加载完成后，您将淡出警告。

小提琴在这里： http://jsfiddle.net/bZgFL/2/

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>

代码是（使用jQuery）

var ifr = document.getElementById('myFrame');

setFrame();
setInterval(setFrame, 3000);

function setFrame() {
  $('#myLoad').fadeIn(200, setAdress);
}

function setAdress() {
  ifr.onload=function() {  $('#myLoad').fadeOut(200) ;}
  ifr.src = 'http://jsfiddle.net/';  
}

显然它需要对外观进行微调，如果你希望用户能够点击iframe，你必须在顶部div上禁用指针，但它应该让你去。

Answer 2

你可以把两个iFrame放在页面上并隐藏用CSS显示它们。与删除元素并将元素插入DOM相比，对页面的影响要小得多。

然后向他们两个添加一个onload事件，触发当前iFrame隐藏和重新加载，而新的on会显示？使用RequestAninationFrame来帮助减少闪烁。代码看起来像这样。

var currentIFrame = 1;

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

这样，只有在确定内容已满载后才能进行切换。

Answer 3

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

只需将此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可见性：隐藏到iframe加载的时间，然后使其可见。

刷新没有白色闪光的iframe内容

3 个答案: