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

我的页面上有一个iFrame，显示样式为无。我有一个JavaScript函数来设置源，然后将显示设置为阻止。问题在于iframe在它的内容被加载之前出现，因此我得到了闪烁的效果。它首先变白，然后显示内容。所以我需要设置源代码，并在完成加载其源代码的所有内容时，只设置它的显示样式。仅在其源内容已完全加载后才显示iFrame

CSS &的Javascript

.ShowMe{display:block;} 

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

来源

2013-07-11 Dean Martin

您使用.load或AJAX（）加载的内容？ – bipen

iframe是否在同一个域上？ – raam86

设置src的javascript函数从一个锚点被调用..（“Show Form”Label），所以它不会在页面加载时完成，但是iFrame在同一个域中。这是Intranet项目。 –

我建议你尝试以下方法：

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

来源

2013-07-11 10:29:43

什么是'element.class'？ – Teemu

这是他正在使用的代码，我认为它对他有用 –

@Teemu我已经用我自己的一些代码更新了答案，以便正确处理除了他自己以外的课程设置，所以他知道它应该在哪里是:) –

您可以在iframe内做到这一点：

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

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

来源

2013-07-11 10:12:53 Teemu

这是这么简单：

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

来源

2017-05-26 10:02:31 user3550138

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

回答

相关问题