javascript - Refresh iframe content without white flash - Stack Overflow

admin管理员组

文章数量:1401171

I have an iframe in my site that must reload every second (it's just reloading simple HTML for data analysis). This causes a really annoying white flash each time it reloads.

I have put hours of research into trying to remove this flash. Here's what I have (which doesn't work), which creates a new iframe, adds it to the DOM, and then removes the old one, effectively reloading the page. It still flashes white though:

    $( 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);
   });

The iframe code is simply:

<div id="bottom-frame-container">
    <iframe id="bottom-frame" width="100%" height="60%" frameborder="0" allowTransparency="true" src="">
</div>

I'm pletely open to any suggestions or alternative approaches here, I'm getting a bit desperate!

I have an iframe in my site that must reload every second (it's just reloading simple HTML for data analysis). This causes a really annoying white flash each time it reloads.

I have put hours of research into trying to remove this flash. Here's what I have (which doesn't work), which creates a new iframe, adds it to the DOM, and then removes the old one, effectively reloading the page. It still flashes white though:

    $( 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);
   });

The iframe code is simply:

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

I'm pletely open to any suggestions or alternative approaches here, I'm getting a bit desperate!

• javascript
• jquery
• html
• iframe

Share Improve this question Follow asked Mar 29, 2014 at 12:19 Conor TaylorConor Taylor 3,10877 gold badges4040 silver badges7171 bronze badges 4

• how about iframe changeurl = function () { fade out iframe container - } - iframe.onload = function() { fadebackiniframecontainer } ? ( pseudo ) – Rob Sedgwick Commented Mar 29, 2014 at 12:28
• The flash is due to removing and injecting elements every second, and you'll be mucking up document flow which will be disorienting. In an ideal world, some AJAX surfacing the data via a web service would be more ideal... Is the page on your domain at least? – Mister Epic Commented Mar 29, 2014 at 12:31
• 1 @RobSedgwick He should also absolutely position the iframes to sit on top of each other. – Mister Epic Commented Mar 29, 2014 at 12:32
• What's actually strange is that you reload a whole page every second. There must be a better way... (typically AJAX is here to address such scenarios) – Christophe Commented Apr 5, 2014 at 21:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Here's how i would handle this issue : have one 'load' div on top of the iframe to prevent the blinking from being seen.
Then before loading you fadein the warning --> when fadein is finished you trigger load --> when load is finished you fadeout the warning.

fiddle is here : http://jsfiddle/bZgFL/2/

html is :

 <iframe
     width=500px
     height=300px
     id = 'myFrame' 
     style='position:absolute;top:0;'
             src = 'http://jsfiddle/' 
    >      
    </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>

code is (using 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/';  
}

Obviously it needs fine tuning for the look, and if you want the user to be able to click the iframe, you'll have to disable pointer on top div, but it should get you going.

Can you put the two iFrames on the page and hide show them with CSS. This much less of an impact on the page than removing and inserting elements into the DOM.

Then add an onload event to both of them that triggers the current iFrame to hide and reload, while the new on shows? Use RequestAninationFrame to help reduce flicker. Code would look something like this.

var currentIFrame = 1;

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

This way you only do the switch once your sure the content has fully loaded.

I know this is an old question but I'm really not sure why someone didn't post this obvious solution....

Just paste this javascript code into any page that has an 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>

It will simply renfer any iframe visibility:hidden until which time the iframe is loaded and then make it visible.

本文标签： javascriptRefresh iframe content without white flashStack Overflow