刷新 iframe 内容没有白闪答案

【问题标题】：Refresh iframe content without white flash刷新 iframe 内容没有白闪
【发布时间】：2014-07-16 17:13:19
【问题描述】：

我的网站中有一个 iframe，必须每秒重新加载（它只是重新加载简单的 HTML 以进行数据分析）。这会在每次重新加载时导致非常烦人的白色闪光。

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

    $( 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>

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

【问题讨论】：

iframe changeurl = function () { fade out iframe container - } - iframe.onload = function() { fadebackiniframecontainer } 怎么样？（伪）
Flash 是由于每秒删除和注入元素，你会弄乱文档流，这会让人迷失方向。在理想情况下，通过 Web 服务显示数据的 AJAX 会更理想...至少是您域中的页面吗？
@RobSedgwick 他还应该绝对将 iframe 放置在彼此之上。
真正奇怪的是你每秒都会重新加载整个页面。一定有更好的方法……（通常 AJAX 就是用来解决这种情况的）

标签： javascript jquery html iframe

【解决方案1】：

以下是我处理此问题的方法：在 iframe 顶部放置一个“加载”div，以防止看到闪烁。
然后在加载之前淡入警告->淡入完成时触发加载->加载完成时淡出警告。

小提琴在这里： 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 上的指针，但它应该可以让您继续前进。

【讨论】：

【解决方案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();
})

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

【讨论】：

【解决方案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 被加载，然后使其可见。

【讨论】：