【经验总结】毁三观的 script.onerror

为了保证项目的质量，页面动态加载的脚本文件，如果加载失败需进行重试（根据具体情况）。

怎么检测脚本文件是否加载失败呢？脑海里毫无犹豫地蹦出了onerror兄弟，于是写了如下代码

var script = document.createElement('script');
script.onerror = function(evt){
    console.log('File Loaded Error');
};
script.src = 'http://www.cnblogs.com/test.js';
document.getElementsByTagName('head')[0].appendChild(script);

打开chrome试了下，毫无压力地可以运行。script的oneror事件触发，在window对象上是否能够捕捉到呢？于是又试了下：

window.onerror = function(evt){
    console.log('error');
};

var script = document.createElement('script');
script.src = 'http://www.cnblogs.com/test.js';
document.getElementsByTagName('head')[0].appendChild(script);

好吧，chrome君华丽丽地把我忽视了，如下图：

其实浏览器的处理是否有差异呢？于是打开最近服务质量不是很稳定的google君，输入关键词：“script onerror 检测”

排在第一位的是正美兄的文章：《script的onerror事件支持情况调查》（请猛点击）

一下毁三观：script的onerror事件，IE6~8与opera11都不支持 （经肉眼检测，属实）

看来在以上提及浏览器里，只能采取迂回战术了。setTimeout是个万能膏药，本能排斥尽量不采用（只是毫无根据的排斥。。）

其中一种思路：对象检测法

 

function loadjs(url, obj){

    var script = document.createElement('script');

    script.onreadystatechange = script.onerror = function(){
        if( !this.readyState || ( (this.readyState==='loaded' || this.readyState==='complete') && !window[obj]) ){
            console.log('File Loaded Error');
        }
    };
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}
loadjs('http://www.cnblogs.com/test.js', 'Feeds');    //假设目标脚本里有Feeds这个对象

 

上面只是提及可能的思路之一，根据具体场景可能可以采取其他措施，不赘述。