判断IFRAME是否加载完成

最新推荐文章于 2024-07-28 12:01:42 发布

iteye_11753

最新推荐文章于 2024-07-28 12:01:42 发布

阅读量145

点赞数

分类专栏：客户端技术---JS---JQUERY 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_11753/article/details/82173797

版权

客户端技术---JS---JQUERY 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="contentType" content="text/html;charset=gbk">
<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>

方法二：使用JS

一般来说，我们判断 iframe 是否加载完成其实与判断 JavaScript 文件是否加载完成采用的方法很类似：

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

几点补充说明：

IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。

第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。