【經驗總結】毀三觀的 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這個對象

 

上面只是提及可能的思路之一，根據具體場景可能可以采取其他措施，不贅述。