【经验总结】毁三观的 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这个对象

 

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

 

posted @ 2012-11-15 13:54  程序猿小卡  阅读(5290)  评论(3编辑  收藏  举报