为什么只有IE9和IE10浏览器同时支持ｓｃｒｉｐｔ元素的onload和onreadystatechange事件？

IE9/10是唯二同时支持ｓｃｒｉｐｔ元素的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 ｓｃｒｉｐｔ = document.createElement('ｓｃｒｉｐｔ');    ｓｃｒｉｐｔ.src = url;    if (isIE()) {        ｓｃｒｉｐｔ.onreadystatechange = function() {            if (this.readyState === 'loaded' || this.readyState === 'complete') {                callback();            }        };    } else {        ｓｃｒｉｐｔ.onload = function() {            callback();        };    }    document.head.appendChild(ｓｃｒｉｐｔ);}

相关问题与解答

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

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

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

```javascript

ｓｃｒｉｐｔ.onload = ｓｃｒｉｐｔ.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事件的触发，要确保按顺序加载，可以考虑在回调函数中动态加载下一个脚本。