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

时间:2013-07-11 10:00:06

标签: javascript jquery css

我的页面上有一个iFrame,显示样式为none。我有一个javascript函数来设置源,然后将显示设置为阻止。问题是iframe在加载内容之前显示出来,因此我得到一个闪烁效果。它先变白,然后显示内容。所以我需要设置源代码,并在完成加载源代码的所有内容后,只设置其显示样式。

CSS&的Javascript

.ShowMe{display:block;}

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

3 个答案:

答案 0 :(得分:3)

我建议您尝试以下方法:

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

根据找到的代码here

答案 1 :(得分:3)

这很简单:

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

答案 2 :(得分:2)

您可以在iframe

中执行此操作
window.onload = function () {
    window.frameElement.className = 'ShowMe'; // 'ShowMe' or what ever you have in ShowMe variable.
}

由于您已使用[jquery]标记了问题,因此我假设您已在$(document).ready()内执行了代码。当DOM准备好时它会被触发,即它使用本机DOMContentLoaded事件(如果可用)。当页面上的所有资源都准备就绪时,window.onload被触发。