如下
<!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
分享到:
相关推荐
在实际应用中,开发者需要注意的是,如果为script元素同时注册了onload和onreadystatechange事件处理器,那么在IE9/10中,事件处理函数中的callback函数将被调用两次,这可能会导致一些不可预料的副作用。...
这段代码的目的是实现一个跨浏览器的页面加载完成事件检测,主要针对Internet Explorer(IE)、Firefox、Opera、Safari等主流浏览器。它模仿了Ext.js库中的`Ext.onReady`功能,确保在页面DOM完全加载后执行指定的...
在IE中,通常使用`onreadystatechange`检查`readyState`是否为'complete',而其他现代浏览器如Firefox、Chrome和Opera则支持`onload`事件。为了兼容性,通常将这两个事件合并处理,如上例所示。 ### 安全性考虑 ...
2. **IE 6、IE 7** 不支持`js.onload`,但提供了`js.onreadystatechange`事件,可以通过检查`readyState`属性来判断脚本加载状态。 3. **Opera** 实际上也支持`js.onreadystatechange`,但其状态与IE有所不同。 ###...
3. **浏览器兼容性**:如前所述,onload事件在现代浏览器中都支持,但在IE8及以下版本中不支持,因此需要使用onreadystatechange事件作为兼容方案。 4. **错误处理**:在实际应用中,除了onload事件外,还应考虑...
- 通过监听 `onload` 和 `onreadystatechange` 事件来判断脚本是否加载完成。 #### 判断iframe里面的资源都加载完毕 - 通常使用 `onload` 事件监听器。 - 需要注意的是,由于同源策略限制,只能监听到同源的 `...
然而,需要注意的是,Internet Explorer 6和7并不支持`<script>`元素的`onload`事件。 针对IE6和IE7,我们可以利用`onreadystatechange`属性来解决这个问题。`onreadystatechange`事件会在脚本的加载状态改变时被...
IE6和IE7等老版本的IE浏览器不支持`onload`事件,但是它们支持`readystatechange`事件。当`<script>`元素的`readyState`属性变为`"loaded"`或`"complete"`时,可以认为脚本已经加载完成。 ```javascript js....
综上所述,为了确保在所有主流浏览器中都能正确判断脚本加载完成,我们需要同时使用`onload`(非IE浏览器)和`onreadystatechange`(IE6、IE7)事件,并根据`readyState`的值来确定脚本是否已经加载并执行完成。...
- **Mozilla/Opera9**: 支持`DOMContentLoaded` 事件,当DOM树构建完成(不等待外部资源如图像)时触发。 ```javascript document.addEventListener("DOMContentLoaded", init, false); ``` - **Safari ...
JavaScript的异步加载是优化网页性能的关键技术,尤其是在...而动态创建`<script>`元素则提供了更多的灵活性,但需要手动处理加载状态和执行顺序。在实际开发中,应根据项目需求和浏览器兼容性选择合适的异步加载策略。
获得时间所代表的微秒 var n1 = new Date("2004-10-10".replace(/-/g, "/")).getTime() 窗口是否关闭 win.closed checkbox扁平 ; clip:rect(5px 15px 15px 5px)"> 获取选中内容 document.selection....
在IE浏览器中,我们不能直接使用`onload`事件来监听`iframe`的加载完成,而是要依赖于`readyState`属性。当`readyState`属性的值变为"loaded"或"complete"时,表明`iframe`已经加载完毕。以下是一个示例代码: ``...
而在非IE浏览器,如Firefox、Chrome和Opera,我们可以直接使用`onload`事件来判断脚本加载状态。 以下是一个简单的示例: ```javascript // IE 下 var script = document.createElement("script"); script....
而在Gecko(Firefox)、WebKit(Safari、Chrome)和Opera等现代浏览器中,`onload`事件更为可靠。为了兼容不同浏览器,通常我们会同时设置这两个事件处理器。在处理函数中,我们检查`this.readyState`,确保其为`'...
在 IE5 及以上版本中,XMLHttpRequest 可以通过 ActiveX 控件实现,而在其他现代浏览器如 Safari、Opera 和 Firefox 中,它作为内置对象存在。为了确保跨浏览器兼容性,我们需要编写一段代码来创建 XMLHttpRequest ...
Omar AL Zabir开发的`ensure`工具实现了这一目标,并且具有良好的多浏览器兼容性,支持IE、Firefox、Opera和Safari等主流浏览器。 `ensure`的工作原理是确保指定的JavaScript文件、CSS样式表以及HTML片段已经加载或...
为了处理不同浏览器的兼容性问题,我们根据浏览器类型(IE、Firefox、Opera、Safari等)设置不同的加载事件监听器。在IE中,我们使用`onreadystatechange`事件;对于其他非IE浏览器,我们使用`onload`事件。当js文件...