加载 Iframe 时 Javascript 隐藏白色 Flash答案

【问题标题】：Java Script hide white Flash when loading Iframe加载 Iframe 时 Javascript 隐藏白色 Flash
【发布时间】：2015-08-13 03:45:03
【问题描述】：

目前在使用 javascript 动态生成 iFrame 时，在 IE v9-11 中遇到烦人的“白色闪光”问题。本质上，我试图隐藏 iframe，直到它被加载，方法是将样式设置为 display:none，然后在 iframe 使用 onload 加载后将其设置为 display:null。这样做 - 应该 - 显示 iframe。看起来样式没有被删除，但函数正在执行。感谢您对加载后如何显示 iframe 的任何想法。

Jsfiddle 可以在这里看到它的直播：http://jsfiddle.net/2zndpm8r/

var ifrm=document.createElement('IFRAME'); 
    ifrm.setAttribute('id','ifrm_ad'); 
    ifrm.setAttribute('height','90'); 
    ifrm.setAttribute('width','728'); 
    ifrm.setAttribute('frameborder','0'); 
    ifrm.setAttribute('scrolling','no'); 
    ifrm.setAttribute('marginwidth','0'); 
    ifrm.setAttribute('marginheight','0'); 
    ifrm.setAttribute('vspace','0'); 
    ifrm.setAttribute('hspace','0'); 
    ifrm.setAttribute('src','//placeholdit.imgix.net/~text?txtsize=23&txt=728%C3%9790&w=728&h=90') 
    ifrm.style.display='none';
    document.body.appendChild(ifrm);
    document.getElementById('ifrm_ad').onload = function(){document.getElementById('ifrm_ad').style.display= null; console.log('show iframe');};

【问题讨论】：

所以 iframe 没有显示？
在 IE 中，不，Iframe 没有被加载。该代码在 FF 和 Chrome 中运行良好：/
It appears the styling is not being removed ... the Iframe is not being loaded - 两个不同的东西 - 是什么？
抱歉，措辞错误。我会澄清的。 iframe - 已加载，但在之后仍然隐藏： document.getElementById('ifrm_ad').onload = function(){document.getElementById('ifrm_ad').style.display= null; console.log('显示 iframe');};

标签： javascript internet-explorer iframe

【解决方案1】：

一个建议

var ifrm=document.createElement('IFRAME'); 
    // ...
    // snip - removed for brevity
    // ...
    ifrm.setAttribute('src','//placeholdit.imgix.net/~text?txtsize=23&txt=728%C3%9790&w=728&h=90') 
    ifrm.style.display='none';
    ifrm.onload = function(){
        ifrm.style.display= ''; // don't use null, use empty string
        console.log('show iframe');
    };
    document.body.appendChild(ifrm);

在将 ifrm 添加到 DOM 之前设置 onload 另外，您可以在这里使用ifrm，而不是笨拙的getElementById

【讨论】：