首页 > 设计 > WEB开发 > 正文

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

2019-11-02 18:24:06
字体:
来源:转载
供稿:网友


1.  网页中的iframe加载完成后,希望做一些工作。比如在iframe内容改变前在某处显示"正在加载",在加载完成后,显示内容改为"加载完成"。那么该怎么处理呢?  

2.    

3.  在jquery中iframe加载完成事件为load,而不是ready  

4.     

5.  <html>   

6.  <head>   

7.  <meta http-equiv="contentType" content="text/html;charset=utf-8">   

8.  <script src="http://Ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>   

9.  <script>   

10.$(function(){   

11.    $("#phone").change(function(){   

12.        $("#message").text("正在加载..");   

13.        $("#theone").attr("src",$(this).val());   

14.    });   

15.       

16.    $("#theone").load(function(){   

17.        $("#message").text("");   

18.    });   

19.});   

20.</script>   

21.</head>   

22.<body>   

23.<select id="phone">   

24.<option value="http://www.google.com.hk/">any one</option>   

25.<option value="http://www.streamcave.com/upload/2010/8/201008251153427683.jpg">htc dream</option>   

26.<option value="http://www.streamcave.com/upload/2010/8/201008251153454306.jpg">htc magic</option>   

27.<option value="http://www.streamcave.com/upload/2010/8/201008251153453524.jpg">htc hero</option>   

28.<option value="http://www.streamcave.com/upload/2010/8/201008251153464400.jpg">htc hattoo</option>   

29.<option value="http://www.streamcave.com/upload/2010/8/201008251153483133.jpg">nexus one</option>   

30.<option value="http://www.streamcave.com/upload/2010/8/201008251153485258.jpg">htc legend</option>   

31.<option value="http://www.streamcave.com/upload/2010/8/201008251153510582.jpg">htc desire</option>   

32.<option value="http://www.streamcave.com/upload/2010/8/201008251153532800.jpg">motorola milestone</option>   

33.</select>   

34.<span id="message" style="color:green"></span>   

35.<hr/>   

36.<iframe id="theone" src="" width="600" height="700"></iframe>   

37.</body>   

38.</html>  


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表