仅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 相关文章推荐
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
javascript Number 与 Math对象的介绍
Nov 17 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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
深入浅出php socket编程
2015/05/13 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
javascript 日期时间 转换的方法
2013/02/21 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
简单快速的实现js计算器功能
2017/08/17 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
JSX在render函数中的应用详解
2019/09/04 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
Python操作Word批量生成文章的方法
2015/07/28 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
厨师岗位职责
2013/11/12 职场文书
干部选拔任用方案
2014/05/26 职场文书
单位工作证明格式模板
2014/10/04 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技