注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

判断link,script和iframe中的src文件是否已经完全加载  

2013-11-19 20:49:46|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在我们动态加载JS,CSS和Iframe时,我们需要知道他们何时load完成。

我们针对不同的标签进行测试,分别测试onload和onreadystatechange事件
JS <script>
CSS <link>
Iframe <iframe>

测试两个事件是否触发的实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This is a test for including js and css</title>
</head>
<body>

</body>
<html>

<script>
var css;
function include_css(css_file) {
var html_doc = document.getElementsByTagName('head')[0];
css = document.createElement('link');
css.setAttribute('rel', 'stylesheet');
css.setAttribute('type', 'text/css');
css.setAttribute('href', css_file);
html_doc.appendChild(css);

// alert state change
css.onreadystatechange = function () {
if (css.readyState == 'loaded' || css.readyState == 'complete') {
alert('CSS onreadystatechange fired');
}
}
css.onload = function () {
alert('CSS onload fired');
}
return false;
}


var js;
function include_js(file) {
var html_doc = document.getElementsByTagName('head')[0];
js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
html_doc.appendChild(js);

js.onreadystatechange = function () {
if (js.readyState == 'loaded' || js.readyState == 'complete') {
//alert(js.readyState); //loaded IE10
alert('JS onreadystatechange fired');
}
}

js.onload = function () {
alert('JS onload fired');
}
return false;
}


var iframe;
function include_iframe(file) {
var html_body = document.getElementsByTagName('body')[0];
iframe = document.createElement('iframe');
iframe.setAttribute('src', file);
html_body.appendChild(iframe);

iframe.onreadystatechange = function () {
if (iframe.readyState == 'loaded' || iframe.readyState == 'complete') {
alert('iframe onreadystatechange fired');
}
}

iframe.onload = function () {
alert('iframe onload fired');
}
return false;
}
include_css("http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css");
include_js("http://code.jquery.com/jquery-1.10.2.min.js");
include_iframe("http://www.baidu.com");
</script>

测试结果:
Windows 7 64

IE8
IE9
IE10
Firefox25
Chrome31
<script>
onreadystatechange
bothboth
onload
onload
<link>
both
both
both
onload
onload
<iframe>
both
both
both
onload
onload

总结:<script> IE8仅仅支持 onreadystatechange, IE9,IE10 已经支持onload事件,<link>和<iframe>两事件都支持,FF和Chrome 三个标签都只支持onload事件

参考资料:

  评论这张
 
阅读(334)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017