javascript - 仅在其源内容完全加载后才显示 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>

基于此处找到的代码。

Answer 3

您可以在以下范围内执行此操作iframe：

window.onload = function () {
    window.frameElement.className = 'ShowMe'; // 'ShowMe' or what ever you have in ShowMe variable.
}

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