仅在源内容完全加载后才显示iFrame

Question

我的页面上有一个iFrame，显示样式为无。我有一个javascript函数来设置源，然后将显示设置为阻止。问题是iframe在加载内容之前就出现了，因此出现闪烁现象。它先变白，然后显示内容。因此，我需要设置源，并且在完成加载其源的所有内容后，只需设置其显示样式。

CSS和Javascript

.ShowMe{display:block;}

function(url)
{
document.getElementById('myIFrame').src = url;
document.getElementById('myIFrame').className = ShowMe;
}

Answer 1

就这么简单：

<iframe onload="this.style.opacity=1;" style="opacity:0;border:none;

Answer 2

我建议您尝试以下操作：

<script type="javascript">
    var iframe = document.createElement("myIFrame");
    iframe.src = url;

        if (navigator.userAgent.indexOf("MSIE") > -1 && !window.opera){
                iframe.onreadystatechange = function(){
            if (iframe.readyState == "complete"){            
                //not sure if your code works but it is below for reference
                  document.getElementById('myIFrame').class = ShowMe;
                  //or this which will work
                  //document.getElementById("myIFrame").className = "ShowMe";

                }
            };
        }       
        else 
        {
            iframe.onload = function(){
                  //not sure if your code works but it is below for reference
                  document.getElementById('myIFrame').class = ShowMe;
                  //or this which will work
                  //document.getElementById("myIFrame").className = "ShowMe";
            };
        } 
</script>

基于此处找到的代码。