仅IE9/10同时支持script元素的onload和onreadystatechange事件分析


Posted in Javascript onApril 27, 2011

如下

<!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 

http://www.w3.org/TR/html5/scripting-1.html#script

https://developer.mozilla.org/En/HTML/Element/Script 

Javascript 相关文章推荐
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
javascript实现yield的方法
Nov 06 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
js实时监听文本框状态的方法
Apr 26 #Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 #Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 #Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 #Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 #Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 #Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 #Javascript
You might like
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP自定义错误用法示例
2016/09/28 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
python append、extend与insert的区别
2016/10/13 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python实现打砖块游戏
2020/02/25 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
django跳转页面传参的实现
2020/09/17 Python
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
前台接待的工作职责
2013/11/21 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
2014年司法所工作总结
2014/11/22 职场文书
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android