iframe加载loading...

最新推荐文章于 2025-07-30 17:16:45 发布

原创最新推荐文章于 2025-07-30 17:16:45 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

其他专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用HTML与JavaScript实现的IFrame加载页面同时显示Loading效果的方法。通过设置IFrame的显示状态和利用JavaScript监听加载进度，确保目标网页完全加载后再隐藏Loading提示，提升了用户体验。

<body>
     <div      id="load" align="center">
<img src="http://sc.cnwebshow.com/upimg/allimg/070707/01294420.gif" /> loading...
     </div>                                                      
     <iframe     id="demo"      src="http://www.baidu.com/"     width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0"></iframe>        
         <script      type="text/javascript">
         //<![CDATA[
     var      a      =      document.getElementById("demo");
     var      b      =      document.getElementById("load");
     a.style.display      =      "none";                     //隐藏
     b.style.display      =      "block";                     //显示
     a.onreadystatechange      =      function()      {
     if      (this.readyState=="complete")      {       //最近才知道的。不然也写不出来。
                                                                 // 解释：一个iframe加载完毕的状态是complete,
                                                                 // 就象xmlhttp里的那个==4一样,这些都是规定的...
     b.innerHTML      =      "load      complete!";
     b.style.display      =      "none";
     a.style.display      =      "block";
     }
     }
         //]]>

</script>
</body>

看了人家的代码：

               var state = this .readyState;
             if (state == " loaded " || state == " interactive " || state == " complete " ) {
               this .onreadystatechange = null ;
            b.innerHTML      =      "load      complete!";
             b.style.display      =      "none";
            a.style.display      =      "block";

}

else

{

window.setTimeout( "回调函数" , 100);

}

好象比我的要更加严密。

但我有点不懂。我的函数是这么写的 a.onreadystatechange = function() {}

那么我这个回调函数该怎么写。

看人家的代码：

function on(){
if ( window.onload )
{
alert( "page onload." );
}
else{
window.setTimeout( on, 1000);
}
}
on();