Question

我正在使用外部来源的iframe，并希望在页面（iframe）完全加载后显示其内容。
我有一个div来覆盖页面上的消息“请稍候”，但它无法正常工作。 DIV在Iframe完全加载之前隐藏。
有没有更好的方法呢？（浏览器：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>

Answer 1

您似乎并未在示例中使用jQuery，即使您已在<head>部分加载了jQuery。使用jQuery我会尝试类似：

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

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

在<body>的末尾使用该代码段，而不是文档开头的原始代码段。

加载内容后显示Iframe

1 个答案: