仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
更新时间：2011年04月27日 00:05:09 作者：
测试结果可以看出，IE9后已经开始支持script的onload事件了。一直以来我们判断js文件是否已经加载完成就是用以上的两个事件。
如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>IE9/10同时支持script元素的onload和onreadystatechange事件</title>
<script src="http://code.jquery.com/jquery.min.js" onload="alert(1)" onreadystatechange="alert(2)"></script>
</head>
<body>
</body>
</html>
结果：
IE6/7/8 : 弹出2
IE9/10 : 弹出2，1
Firefox/Safari/Chrome/Opera : 弹出1
测试结果可以看出，IE9后已经开始支持script的onload事件了。一直以来我们判断js文件是否已经加载完成就是用以上的两个事件。很久以前就知道IE中使用onreadystatechange事件，事件handler中使用readyState的值判断是否加载完成。其它浏览器使用onload事件。
if(isIE){
script.onreadystatechange = function(){
if(this.readyState == 'loaded' || this.readyState == 'complete'){
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
这种写法现在也没有问题。但如下写法可能会让的回调在IE9/10中执行两次
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
callback();
}
}
这种写法的取巧之处在于onload和onreadystatechage都用同一个函数，Firefox/Safari/Chrome/Opera中不支持onreadystatechage事件，也没有readyState属性，所以 !this.readyState 是针对这些浏览器。readyState是针对IE浏览器，载入完毕的情况是loaded，缓存的情况下可能会出现readyState为complete。所以两个不能少。但由于IE9/10也已经支持onload事件了，会造成callback执行2次。
复制代码 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>IE9/10同时支持script元素的onload和onreadystatechange事件</title>
<script src="http://code.jquery.com/jquery.min.js" onload="alert(1)" onreadystatechange="alert(2)"></script>
</head>
<body>
</body>
</html>
结果：
IE6/7/8 : 弹出2
IE9/10 : 弹出2，1
Firefox/Safari/Chrome/Opera : 弹出1
测试结果可以看出，IE9后已经开始支持script的onload事件了。一直以来我们判断js文件是否已经加载完成就是用以上的两个事件。很久以前就知道IE中使用onreadystatechange事件，事件handler中使用readyState的值判断是否加载完成。其它浏览器使用onload事件。
复制代码 代码如下:
if(isIE){
script.onreadystatechange = function(){
if(this.readyState == 'loaded' || this.readyState == 'complete'){
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
这种写法现在也没有问题。但如下写法可能会让的回调在IE9/10中执行两次
复制代码 代码如下:
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
callback();
}
}
这种写法的取巧之处在于onload和onreadystatechage都用同一个函数，Firefox/Safari/Chrome/Opera中不支持onreadystatechage事件，也没有readyState属性，所以 !this.readyState 是针对这些浏览器。readyState是针对IE浏览器，载入完毕的情况是loaded，缓存的情况下可能会出现readyState为complete。所以两个不能少。但由于IE9/10也已经支持onload事件了，会造成callback执行2次。
http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1
相关文章
这篇文章主要为大家详细介绍了js获取地址栏参数的两种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JavaScript遍历对象的七种方法汇总，文章通过从属性可枚举性问题与遍历方法两个大方面讲述全文，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要介绍了JS绘制生成花瓣效果的方法,涉及javascript数学运算及页面元素操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
每个函数创建时默认带有一个prototype属性，其中包含一个constructor属性，和一个指向Object对象的隐藏属性,需要的朋友可以参考下2012-11-11
Javascript Cookie读写删除操作的函数代码，需要操作cookies的朋友可以参考下。2010-03-03
这篇文章主要介绍了详解JSONObject和JSONArray区别及基本用法,需要的朋友可以参考下2017-10-10
JavaScript中的atob和btoa函数及base64编码解码详解
在JavaScript中btoa和atob是两个处理Base64编码的全局函数,它们通常用于在浏览器环境中对二进制数据进行编码和解码,这篇文章主要介绍了JavaScript中atob和btoa函数及base64编码解码的相关资料,需要的朋友可以参考下2025-04-04
亲爱的小伙伴,对于数组javascript中的数组去重方法你知道多少种呢？学会如何对数组进行去重对于javascript的学习来说也是十分重要的,下边就让我来分享一下我所知道的集中数组去重的方法吧,感兴趣的小伙伴跟着小编一起来看看吧2025-03-03
下面小编就为大家分享一篇浅谈MUI框架中加载外部网页或服务器数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家详细解析了Bootstrap模态窗口源码，基本每行都加了注释，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
最新评论