加载内容后显示 iframe答案

【问题标题】：Show Iframe after loading content加载内容后显示 iframe
【发布时间】：2013-11-20 09:55:40
【问题描述】：

我正在使用来自外部来源的 iframe，并希望在页面 (iframe) 完全加载后显示其内容。
我有一个 div 用“请稍候”消息覆盖页面，但它不能正常工作。在 iframe 完全加载之前，DIV 隐藏。
有没有更好的方法呢？（浏览器：IE）

代码：

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">
 document.getElementById("hideAll").style.display = "block"; </script> 

<script type="text/javascript">
window.onload = function() 
{ document.getElementById("hideAll").style.display = "none"; } </script> 

<style type="text/css">
body{
overflow: hidden;
width:100%;
height:100%;
padding:0;
margin:0;
}

#hideAll
{
position: relative;
left: 0px; 
right: 0px; 
top: 0px; 
bottom: 0px; 
background-color: white;
z-index: 99; 

}
#main{
width:1600px;
height: 500px;
margin:0 auto;
position: relative;
top: -50px;
left: -400px;
}
#Overlay {
opacity:    1; 
background-color: white; 
width:      227px;
height:     100%; 
z-index:    1;
top:        140px; 
left:       0; 
position: relative;
}


 #Overlay2 {
 opacity:    1; 
 background-color: white; 
 width:      262px;
 height:     100%; 
 z-index:    2;
 top:        140px; 
 left:       765px; 
 position: relative;
}

</style>
</head>

 <body>
<div  id="hideAll"> Please wait...</div>

 <div id="main"> 
<iframe  src="http://ectect.com"  scrolling="no" style="width:100%; height:100%; border:none; margin-left:0px;"/></iframe>
</div>

</body>

【问题讨论】：

您的代码应该可以正常工作。我想iframe 使用ajax 或其他一些异步技术（或它自己的window.onload），这会将“加载”时间延长到iframe 自己的window.onload 之后。在这种情况下，从iframe 获取可靠就绪消息的唯一方法是从iframe 手动创建和发送该消息。如果您无法控制文件，则无能为力。
我用这段代码在 Chrome 上一切正常。我无法在 IE 中管理，因为它只工作了几次，不可靠，我需要 IE，因为我需要创建 .hta 文件并从我的桌面运行它。问题是 HTA 默认浏览器是 IE。我不能使用 chrome 的另一个原因是使用这个文件的人没有它，如果我嵌入了 chrome 的便携式版本，我不能使用 window.resize() 因为它不起作用并且我的模板是自定义的。 .
但是你可以控制iframe的内容？如果是这样，当一切都完成后，您可以从iframe 在主页上调用有点“就绪”的功能。
顺便说一句。如果您将代码作为 HTA 进行测试，请不要忘记在 iframe 标记中添加 application="yes" 属性，否则您将无法获得跨框架访问。这也可能会阻止onload 与iframe？我从来没有在 HTA 中遇到过 onload 的问题，它似乎也适用于第三方内容（尽管在 iframe 中的第三方内容的情况下，你不应该使用 application="yes ")。
谢谢提姆！很高兴知道

标签： jquery html internet-explorer iframe

【解决方案1】：

您的示例中似乎并没有真正使用 jQuery，即使您在 <head> 部分中加载它也是如此。使用 jQuery 我会尝试类似的东西：

<script type="text/javascript">
  $(document).ready(function() {
    $("#hideAll").show();
  });

  $("#main iframe").load(function() {
    $("#hideAll").hide();
  });
</script>

在<body> 的末尾使用那个 sn-p 而不是文档开头的原始两个。

【讨论】：

嗯...$(document).ready() 在onDOMContentLoaded 触发时执行，OP 有window.onload，它应该等到页面上的所有资源都已加载。 “The DIV hides before the Iframe has completely loaded”是这里的问题。
好的。必须对此进行测试，这个编辑后的版本似乎可以按预期工作 - 至少在 Firefox 上是这样。