`
zhouyrt
  • 浏览: 1163380 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

仅IE9/10/(Opera)同时支持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次。


注:动态创建的script在Opera中是支持onreadystatechange事件的

 

相关:

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
2
分享到:
评论

相关推荐

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

    在实际应用中,开发者需要注意的是,如果为script元素同时注册了onload和onreadystatechange事件处理器,那么在IE9/10中,事件处理函数中的callback函数将被调用两次,这可能会导致一些不可预料的副作用。...

    兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现

    这段代码的目的是实现一个跨浏览器的页面加载完成事件检测,主要针对Internet Explorer(IE)、Firefox、Opera、Safari等主流浏览器。它模仿了Ext.js库中的`Ext.onReady`功能,确保在页面DOM完全加载后执行指定的...

    动态加载JavaScript文件的两种方法_.docx

    在IE中,通常使用`onreadystatechange`检查`readyState`是否为'complete',而其他现代浏览器如Firefox、Chrome和Opera则支持`onload`事件。为了兼容性,通常将这两个事件合并处理,如上例所示。 ### 安全性考虑 ...

    js加载检测

    2. **IE 6、IE 7** 不支持`js.onload`,但提供了`js.onreadystatechange`事件,可以通过检查`readyState`属性来判断脚本加载状态。 3. **Opera** 实际上也支持`js.onreadystatechange`,但其状态与IE有所不同。 ###...

    JavaScript动态插入script的基本思路及实现函数

    3. **浏览器兼容性**:如前所述,onload事件在现代浏览器中都支持,但在IE8及以下版本中不支持,因此需要使用onreadystatechange事件作为兼容方案。 4. **错误处理**:在实际应用中,除了onload事件外,还应考虑...

    前端开发面试题

    - 通过监听 `onload` 和 `onreadystatechange` 事件来判断脚本是否加载完成。 #### 判断iframe里面的资源都加载完毕 - 通常使用 `onload` 事件监听器。 - 需要注意的是,由于同源策略限制,只能监听到同源的 `...

    怎么判断js脚本加载完成

    然而,需要注意的是,Internet Explorer 6和7并不支持`&lt;script&gt;`元素的`onload`事件。 针对IE6和IE7,我们可以利用`onreadystatechange`属性来解决这个问题。`onreadystatechange`事件会在脚本的加载状态改变时被...

    js 判断脚本加载完毕的代码

    IE6和IE7等老版本的IE浏览器不支持`onload`事件,但是它们支持`readystatechange`事件。当`&lt;script&gt;`元素的`readyState`属性变为`"loaded"`或`"complete"`时,可以认为脚本已经加载完成。 ```javascript js....

    判断脚本加载是否完成的方法

    综上所述,为了确保在所有主流浏览器中都能正确判断脚本加载完成,我们需要同时使用`onload`(非IE浏览器)和`onreadystatechange`(IE6、IE7)事件,并根据`readyState`的值来确定脚本是否已经加载并执行完成。...

    [removed] 加载完毕的问题及解决方案(下)

    - **Mozilla/Opera9**: 支持`DOMContentLoaded` 事件,当DOM树构建完成(不等待外部资源如图像)时触发。 ```javascript document.addEventListener("DOMContentLoaded", init, false); ``` - **Safari ...

    js异步加载的三种解决方案

    JavaScript的异步加载是优化网页性能的关键技术,尤其是在...而动态创建`&lt;script&gt;`元素则提供了更多的灵活性,但需要手动处理加载状态和执行顺序。在实际开发中,应根据项目需求和浏览器兼容性选择合适的异步加载策略。

    js使用小技巧

    获得时间所代表的微秒 var n1 = new Date("2004-10-10".replace(/-/g, "/")).getTime() 窗口是否关闭 win.closed checkbox扁平 ; clip:rect(5px 15px 15px 5px)"&gt; 获取选中内容 document.selection....

    JS判断iframe是否加载完成的方法

    在IE浏览器中,我们不能直接使用`onload`事件来监听`iframe`的加载完成,而是要依赖于`readyState`属性。当`readyState`属性的值变为"loaded"或"complete"时,表明`iframe`已经加载完毕。以下是一个示例代码: ``...

    JS动态加载脚本并执行回调操作

    而在非IE浏览器,如Firefox、Chrome和Opera,我们可以直接使用`onload`事件来判断脚本加载状态。 以下是一个简单的示例: ```javascript // IE 下 var script = document.createElement("script"); script....

    动态加载JavaScript文件的两种方法

    而在Gecko(Firefox)、WebKit(Safari、Chrome)和Opera等现代浏览器中,`onload`事件更为可靠。为了兼容不同浏览器,通常我们会同时设置这两个事件处理器。在处理函数中,我们检查`this.readyState`,确保其为`'...

    ASP.NET Ajax基础

    在 IE5 及以上版本中,XMLHttpRequest 可以通过 ActiveX 控件实现,而在其他现代浏览器如 Safari、Opera 和 Firefox 中,它作为内置对象存在。为了确保跨浏览器兼容性,我们需要编写一段代码来创建 XMLHttpRequest ...

    多浏览器兼容的动态加载 JavaScript 与 CSS第1/2页

    Omar AL Zabir开发的`ensure`工具实现了这一目标,并且具有良好的多浏览器兼容性,支持IE、Firefox、Opera和Safari等主流浏览器。 `ensure`的工作原理是确保指定的JavaScript文件、CSS样式表以及HTML片段已经加载或...

    JS加载器如何动态加载外部js文件

    为了处理不同浏览器的兼容性问题,我们根据浏览器类型(IE、Firefox、Opera、Safari等)设置不同的加载事件监听器。在IE中,我们使用`onreadystatechange`事件;对于其他非IE浏览器,我们使用`onload`事件。当js文件...

Global site tag (gtag.js) - Google Analytics