1

外部ソースの 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>
4

1 に答える 1

0

<head>セクションで jQuery を読み込んでいるにもかかわらず、例では実際には jQuery を使用していないようです。jQuery を使用して、次のようなものを試してみます。

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

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

<body>ドキュメントの最初にある元の 2 つの代わりに、そのスニペットを最後に使用します。

于 2013-11-08T11:50:41.280 に答える