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

如下


代码如下:

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

赞 (0)

相关推荐

  • 各浏览器对link标签onload/onreadystatechange事件支持的差异分析

    各浏览器对link标签onload/onreadystatechange事件支持的差异分析

    1,onload事件 复制代码 代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>Link Element onload</title> <link type="text/css" rel="stylesheet" href="http://i3.sinaimg.cn/rny

  • document.onreadystatechange事件的用法分析

    这两天,正在给部门的一个项目做优化,其中一项是将web应用中的所有alert用div方式实现,javascript的相关方法都写好了,方法名为showDialog,前台页面调用showDialog方法一点也没有问题,可是页面一旦提交,从后台输出脚本,调用showDialog方法,就会时不时的出现问题了,报一个无法打开Internet站点的错误,在脚本中下断点调试,依然找不到问题的根源,最后到网上一查,这个问题有可能是页面没有完全加载造成的,于是乎,修改后台输出脚本的代码,将其改为 documen

  • firefox下对ajax的onreadystatechange的支持情况分析

    一.问题: 复制代码 代码如下: var xmlHttp; function savecarttodata(){ createXMLHttpRequest(); var rndcode = new Date().getTime(); var CartUrl ="a.asp?cache="+rndcode xmlHttp.onreadystatechange = function(){ ..... } xmlHttp.open ("GET",CartUrl,true)

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

    如下 复制代码 代码如下: <!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="ale

  • 使用Script元素发送JSONP请求的方法

    使用Script元素发送JSONP请求的方法 // 根据指定URL发送一个JSONP请求 //然后把解析得到的相应数据传递给回调函数 //在URL中添加一个名为jsonp的查询参数,用于指定该请求的回调函数的名称 function getJSONP(url, callback){ //为本次请求创建一个唯一的回调函数名称 var cbnum = "cb"+getJSONP.counter++; var cbname = "getJSONP."+cbnum; if(u

  • 中小企业突破4200万户 企业邮箱仅有10%

    据iResearch艾瑞咨询公司根据Radicati Group的数据显示,预测至2011年,企业用户将以平均每年20%左右的速度增长到1645亿封/天.然而据时代网(www.now.cn)相关负责人坦言,国内大多数的中小企业还处在成长阶段,信息化水平相对滞后,仅有10%左右的中小企业用户使用企业邮局,这与庞大的中小企业数量形成了鲜明的反差. 企业邮局可以使企业快速.高效的进行信息或数据的交换,提升企业工作效率.时代网提醒客户,企业可以结合自身的特点,选配合适的企业邮局及其增值功能,做到量体裁衣

  • layui问题之渲染数据表格时,仅出现10条数据的解决方法

    一.问题 ajax获取服务端数据之后,要动态渲染table,但数据仅仅数显了10条,并没有渲染所有的数据. 二.经过 看一下表格需要的数据,0-9条的数据都自动有一个名为LAY_TABLE_INDEX的键值对,但10条及之后的数据都没有这个键值对. 很是纳闷,这个表格不带分页功能,应该不需要写limit对数据进行限制 table.render({ elem: '#orderTable' ,height: 400 ,cols: [[ //标题栏 {field: 'status', title: "

  • 浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元

  • js 动态给元素添加、移除事件的实现方法

    最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,写了如下两个事件 一个添加事件 ,一个是移除事件 /addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作 //作用域:事件处理程序会在其所属元素的作用域内运行 //addEventListener(event,function,capture/bubble);removeEventListener(event,functio

  • 鼠标经过子元素触发mouseout，mouseover事件的解决方案

    我想实现的目标:当鼠标进入黑色框时,橙色框执行淡入动画:当黑色框范围移动的时候(即使经过粉色框,动画仍然不被触发):当鼠标移出的时候,橙色方块消失. 遇到的问题阐述:当鼠标移入黑色框的时候,橙色框执行淡入动画,但是当鼠标从黑色框经过粉色框的时候,橙色框就消失了,然后又执行一遍淡入动画.当鼠标从粉色框移出到黑色框的时候,橙色框的淡入动画又被执行.这不是我想要的. 初期代码: <!DOCTYPE html> <html> <head> <script src=&quo

  • 利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

    前言 大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID.或者页面源码方法去找,可能最后徒劳无功.下面我来介绍利用chrome浏览器来查找元素绑定的事件. Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码

  • jQuery支持动态参数将函数绑定到事件上的方法

    本文实例讲述了jQuery支持动态参数将函数绑定到事件上的方法.分享给大家供大家参考.具体分析如下: 下面的js代码提供了两种方法用于绑定函数到事件,其中方法二可以传递动态参数,非常实用 //方法一 $('#foo').click(function(event) { alert('User clicked on "foo."'); }); //方法二, 支持动态传参 $('#foo').bind('click', {test1:"abc", test2:"

随机推荐