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

最新推荐文章于 2021-06-08 12:09:08 发布

原创最新推荐文章于 2021-06-08 12:09:08 发布 · 2.2w 阅读

CC 4.0 BY-SA版权

9 篇文章

订阅专栏

本文介绍如何使用jQuery来监听iframe的加载完成事件，并通过实例展示了如何在iframe加载前后更改提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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>