为什么只有IE9和IE10浏览器同时支持script元素的onload和onreadystatechange事件？

IE9/10是唯二同时支持script元素的onload和onreadystatechange事件的版本，这在跨浏览器兼容性方面很重要。

事件

1、onload事件：当外部脚本文件加载完成时触发，适用于所有现代浏览器。

2、onreadystatechange事件：主要用于IE浏览器，通过检查readyState属性来判断脚本是否加载完成，状态值包括loading（正在加载）、loaded（加载完成）和complete（完全加载）。

各浏览器支持情况

浏览器	onload事件	onreadystatechange事件
IE6/7/8	不支持	支持
IE9/10	支持	支持
Firefox	支持	不支持
Safari	支持	不支持
Chrome	支持	不支持
Opera	支持	支持

示例代码

 // 判断是否为IE浏览器 function isIE() {     return window.navigator.userAgent.indexOf("MSIE") !== -1 || !!document.documentMode; } // 动态加载脚本的函数 function loadScript(url, callback) {     var script = document.createElement('script');     script.src = url;     if (isIE()) {         script.onreadystatechange = function() {             if (this.readyState === 'loaded' || this.readyState === 'complete') {                 callback();             }         };     } else {         script.onload = function() {             callback();         };     }     document.head.appendChild(script); }

相关问题与解答

1、在IE9/10中，为什么使用同一个回调函数会导致执行两次？

原因：在IE9/10中，既支持onload事件又支持onreadystatechange事件，如果将两个事件绑定到同一个回调函数，当脚本加载完成时，会先触发onreadystatechange事件，然后触发onload事件，导致回调函数执行两次。

解决方法：可以通过检查readyState属性来避免重复执行。

```javascript

script.onload = script.onreadystatechange = function() {

if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {

callback();

}

};

```

这样，在其他浏览器中，由于不支持onreadystatechange事件，!this.readyState条件为真，回调函数只执行一次；在IE9/10中，虽然两个事件都会触发，但由于readyState属性的存在，回调函数也只会执行一次。

2、如何确保脚本按顺序加载？

方法：可以使用async=“async”或defer=“defer”属性来控制脚本的加载顺序，但需要注意的是，这些属性并不影响onload和onreadystatechange事件的触发，要确保按顺序加载，可以考虑在回调函数中动态加载下一个脚本。

以上就是关于“仅IE9/10同时支持script元素的onload和onreadystatechange事件分”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!