使用jquery获取iframe加载完成事件

最新推荐文章于 2022-11-18 14:23:36 发布

转载最新推荐文章于 2022-11-18 14:23:36 发布 · 1.4k 阅读

PHP 专栏收录该内容

417 篇文章

订阅专栏

本文介绍如何使用jQuery监听iframe加载完成的事件，并展示了一个实例。通过使用load事件而非ready事件，可以实现在iframe内容加载前后显示不同的提示信息。

[html]view plaincopy 
   
 网页中的iframe加载完成后，希望做一些工作。比如在iframe内容改变前在某处显示"正在加载"，在加载完成后，显示内容改为"加载完成"。那么该怎么处理呢？  
   
 在jquery中iframe加载完成事件为load，而不是ready  
    
 <html>   
 <head>   
 <meta http-equiv="contentType" content="text/html;charset=utf-8">   
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>   
 <script>   
 $(function(){   
     $("#phone").change(function(){   
         $("#message").text("正在加载..");   
         $("#theone").attr("src",$(this).val());   
     });   
        
     $("#theone").load(function(){   
         $("#message").text("");   
     });   
 });   
 </script>   
 </head>   
 <body>   
 <select id="phone">   
 <option value="http://www.google.com.hk/">any one</option>   
 <option value="http://www.streamcave.com/upload/2010/8/201008251153427683.jpg">htc dream</option>   
 <option value="http://www.streamcave.com/upload/2010/8/201008251153454306.jpg">htc magic</option>   
 <option value="http://www.streamcave.com/upload/2010/8/201008251153453524.jpg">htc hero</option>   
 <option value="http://www.streamcave.com/upload/2010/8/201008251153464400.jpg">htc hattoo</option>   
 <option value="http://www.streamcave.com/upload/2010/8/201008251153483133.jpg">nexus one</option>   
 <option value="http://www.streamcave.com/upload/2010/8/201008251153485258.jpg">htc legend</option>   
 <option value="http://www.streamcave.com/upload/2010/8/201008251153510582.jpg">htc desire</option>   
 <option value="http://www.streamcave.com/upload/2010/8/201008251153532800.jpg">motorola milestone</option>   
 </select>   
 <span id="message" style="color:green"></span>   
 <hr/>   
 <iframe id="theone" src="" width="600" height="700"></iframe>   
 </body>   
 </html>  