本文介绍如何在jQuery中监听iframe的load事件，实现页面加载提示与内容更新后的相应操作。
今天在项目中，用ajax去后台去数据列表，然后显示数据列表；同时，把数据中课程总时间和已经学习的时间总时长。把数据给一个iframe，这个iframe中用amcharts 显示矩形图和饼形图。 但是这个iframe一直不刷新。
参考一下的代码，在给iframe的src赋值后，要等iframe的load事件完成后，在做一点小动作就可以了。（给页面的一个隐藏变量赋值。）
转载自： http://www.streamcave.com/article/javascript/201008/jquery_iframe_load.html
网页中的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>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
