javascript - 关于页面内 script标签的加载问题

Question

各位大神请教个问题，如何检查页面的script 标签是否已经正确的被加载

在现代浏览器中 ，可以使用onerror 事件去做回调通知；
但是在IE6-8，并不能支持onerror 事件；
然后我就想用onload和onreadystatechange事件，做减法将未加载的标签收集出来，
然后发现在IE10- ，不论script标签是否被成功的加载，onreadystatechange 都会被触发；

请问各位大神，有没有好的思路去做页面中script标签是否被正常加载的监控

Answer 1

redaystate又不是只在onload的时候才改变

xxx.onreadystatechange = function() {
    if (this.readyState == 'loaded') {
        //...
    }
}

Answer 2

/**
 * 异步加载一个js文件或css文件，并执行回调函数
 * @param  {String}    fileType   文件类型
 * @param  {String}    src        链接地址
 * @param  {function}  success    加载成功后的回调函数
 * @param  {function}  error      加载失败后的回调函数
 * @return {undefined} undefined  无返回值
 */
function loadAsync(object) {
  // 获取head节点
  let head = document.head || document.getElementsByTagName('head')[0];
  // 需要加载js文件
  if (object.fileType === 'js') {
    // 创建script节点
    let script = document.createElement('script');
    // 设置script的src属性
    script.src = object.src;
    // 将script元素插入head元素中
    head.appendChild(script);
    // success回调函数存在的话
    if (object.success) {
      // 监听script元素的onload和onreadystatechange事件
      script.onload = script.onreadystatechange = () => {
        // 判断脚本是否加载完成
        if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
          // 执行success回调函数
          object.success();
        }
      }
    }
    // error回调函数存在的话
    if (object.error) {
      // 监听onerror事件
      script.onerror = () => {
        // 执行error回调函数
        object.error();
      }
    }
  // 需要加载css文件
  } else if (object.fileType === 'css') {
    // 创建link节点
    let link = document.createElement('link');
    // 设置rel属性
    link.rel = 'stylesheet';
    // 设置type属性
    link.type = 'text/css';
    // 设置href属性
    link.href = object.src;
    // 将link节点插入head
    head.appendChild(link);
    // success回调函数存在的话
    if (object.success) {
      // 监听link元素的onload事件
      link.onload = () => {
        // 执行回调函数
        object.success();
      }
    }
    // error回调函数存在的话
    if (object.error) {
      // 监听onerror事件
      link.onerror = () => {
        // 执行error回调函数
        object.error();
      }
    }
  }
}

loadAsync({
  fileType: 'js',
  src: 'http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js',
  success: () => {
    console.log('请求成功!');
  },
  error: () => {
    console.log('请求失败!');
  }
});