1

我正在使用来自外部来源的 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>
4

1 回答 1

0

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

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

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

<body>在文档开头使用该片段而不是原始两个。

于 2013-11-08T11:50:41.280 回答