javascript創建css、js，onload觸發callback兼容主流瀏覽器的實現

原文：http://www.fantxi.com/blog/archives/load-css-js-callback/

由於需要寫個函數，既可以加載css，又可以加載js，所以對各主流瀏覽器對加載js、css後是否觸發onload事件做了個測試。當然，爲了兼容，首先要考慮的是會用到onload和onreadystatechange，但他們並不是萬能的。加載js文件onload觸發callback不算大問題。css比較特殊，因爲Webkeit/FF下加載css不會觸發onload事件。所以研究了一晚上才找到個兼容的辦法，分享如下：

首先測試元素直接寫在頁面

<link οnlοad="alert('css onload')" rel="stylesheet" href="http://localhost/css/123.css"/>
<script οnlοad="alert('js onload')" src="http://localhost/123.js"></script>
<link onreadystatechange="alert('css readystatechange')" rel="stylesheet" href="http://localhost/css/123.css"/>
<script onreadystatechange="alert('js readystatechange')" src="http://localhost/123.js"></script>

CSS onload: 支持: IE6-9/OP, 不支持: FF/Webkit(SF/CM)
JS onload: 支持: IE9/OP/FF/Webkit, 不支持: IE6-8

CSS onreadystatechange: 支持: IE6-9, 不支持: OP/FF/Webkit
JS onreadystatechange: 支持: IE6-9, 不支持: OP/FF/Webkit

測試js創建元素

var doc = document,
    head = doc.getElementsByTagName("head")[0],
    css, js;

css = doc.createElement('link');
css.href = 'http://localhost/123.css?2';
css.rel = 'stylesheet';
head.appendChild(css);

js = doc.createElement('script');
js.src = 'http://localhost/123.js?2';
head.appendChild(js);

css.onload = function(){
    alert('css onload')
}
js.onload = function(){
    alert('js onload')
}
css.onreadystatechange = function(){
    alert('css readystatechange')
    //alert(this.readyState) //IE可以得到loading/complete, OP爲undefined
}
js.onreadystatechange = function(){
    alert('js readystatechange')
    //alert(this.readyState) //IE可以得到loading/loaded, OP爲loaded
}

CSS/JS onload:(同元素直接寫在頁面是一樣的)

CSS onreadystatechange: 支持: IE6-9/OP, 不支持: FF/Webkit (這裏有區別，OP支持js創建的css元素，但readyState爲undefined)
JS onreadystatechange: 支持: IE6-9/OP, 不支持: FF/Webkit (這裏有區別，OP支持js創建的js元素，readyState爲loaded)

所以爲了更大的兼容，onload、onreadystatechange都要寫上，代碼類似下面：

// 先把js或者css加到頁面: head.appendChild(node);
// onload爲IE6-9/OP下創建CSS的時候，或IE9/OP/FF/Webkit下創建JS的時候
// onreadystatechange爲IE6-9/OP下創建CSS或JS的時候
node.onload = node.onreadystatechange = function(){
	// !this.readyState 爲不支持onreadystatechange的情況，或者OP下創建CSS的情況
	// this.readyState === "loaded" 爲IE/OP下創建JS的時候
	// this.readyState === "complete" 爲IE下創建CSS的時候
	if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
		node.onload = node.onreadystatechange = null; //防止IE內存泄漏
		alert('loaded, run callback');
	}
}

jquery、kissy的源碼，判斷加載成功的核心部分差不多都這樣實現的。

存在的問題：
1、當瀏覽器同時支持onload、onreadystatechange的情況會觸發上面的函數兩次，
比如：
IE9加載JS的時候，會alert兩次，加載CSS的時候，alert一次，註釋掉“onload、readystatechange=null”，alert兩次。
OP加載JS/CSS，alert一次，把“onload、readystatechange=null”註釋也會alert兩次。
解決：
先在外部設定個變量isLoaded = false;
"if (!this.readyState..."上面加上個判斷，如果已經加載成功就返回，比如：if (isLoaded) { return; }
"node.onload =..."上面加上 isLoaded = ture;
JQ有沒有加這個我忘記了、KS應該是加了類似的判斷了。

2、這個方法加載JS調用callback是兼容性沒問題了，但是加載CSS再callback支持情況不同了：
IE6-9/OP可以成功alert，但是FF/Webkit不支持css的onload，解決辦法：

2.1、讀取cssRules的length來判斷是否加載成功，缺點不能跨域讀取(非IE)。

var doc = document,
head = document.getElementsByTagName( 'head' )[0],
link = doc.createElement('link');
	//link.href = 'http://xxx.com/123.css'; //跨域
	link.href = 'http://localhost/123.css';
	link.rel = 'stylesheet';
	head.appendChild( link );

var sheet, cssRules;
if ( 'sheet' in link ) { //FF/CM/OP
	sheet = 'sheet'; cssRules = 'cssRules';
}
else { //IE
	sheet = 'styleSheet'; cssRules = 'rules';
}

var _timer1 = setInterval( function() { // 通過定時器檢測css是否加載成功
	try {
		if ( link[sheet] && link[sheet][cssRules].length ) { // css被成功加載
			// console.log(link[sheet][cssRules]);
			clearInterval( _timer1 ); // 清除定時器
			clearTimeout( _timer2 );
			alert('loaded, run callback'); // 加載成功執行callback
		}
	} catch( e ) {
		// FF看到的可能的報錯：
		//本地：nsresult: "0x8053000f (NS_ERROR_DOM_INVALID_ACCESS_ERR)" ，因爲沒加載完成還不能讀取，加載完畢就不會報錯了
		//跨域：Security error, code: "1000" nsresult: "0x805303e8"，因爲不能跨域讀取CSS。。。
		//關於跨域訪問：FF/OP/CM都禁止，IE6-9都可以跨域讀取css。
	} finally {}
}, 20 ),
// 創建超時定時器，如果過10秒沒檢測到加載成功
_timer2 = setTimeout( function() {
	clearInterval( _timer1 ); // 清除定時器
	clearTimeout( _timer2 );
	alert('loaded ? run callback'); // 都過了這麼長時間了，雖然沒判斷加載成功也執行callback（這裏可能本身就加載失敗，也可能是跨域的情況）
}, 10000 );
//@See: http://stackoverflow.com/questions/5537622/dynamically-loading-css-file-using-javascript-with-callback-without-jquery

2.2、創建div#hack4loaded，並添加到頁面，然後定時讀取div的樣式，如果樣式是css裏面設置的就說明加載成功，此方法不存在跨域問題，所有瀏覽器都OK。（css裏面加上一個樣式: #hack4loaded{display:none}）

var doc = document,
head = doc.getElementsByTagName('head')[0],
link = doc.createElement('link');
	link.href = 'http://localhost/123.css';
	link.rel = 'stylesheet';
	head.appendChild( link );

var div  = document.createElement('div');
    div.id = 'hack4loaded';
    var getStyle = function(name){ //獲取css裏面設置的元素樣式
		if(div.currentStyle){ // IE/OP
			return div.currentStyle[name];
		}else{ // FF/CM
			return div.ownerDocument.defaultView.getComputedStyle(div, null)[name];
		}
    };
document.body.appendChild(div); // 添加到頁面
//創建定時器，讀取創建的div的樣式是否是已經在css裏面設置好的
var _timer1= setInterval( function() {
	//console.log(getStyle('display'));
	if ('none' === getStyle('display')) { //樣式和css裏面設置的一樣，說明加載成功
		clearInterval( _timer1 ); // 清除定時器
		clearTimeout( _timer2 );
		div.parentNode.removeChild(div); //移除div
		alert('loaded, run callback'); // 加載成功執行callback
	}
}, 50 ),
// 創建超時定時器，防止css文件加載失敗的情況
_timer2 = setTimeout( function() {
	clearInterval( _timer1 ); // 清除定時器
	clearTimeout( _timer2 );
	alert('fail to load'); // 這個沒加載成功的可能性很大，再就是網速太慢超時了
}, 10000 );

所以總結如下：

javascript創建js或者css，可以兼容瀏覽器在onload時觸發callback。
只要把上面的“node.onload = node.onreadystatechange = function()”方法，再結合2.2的創建div#hack4loaded的方法結合再一起，就可以創建一個比較完美的支持加載js、css，並可以在文件加載完畢觸發callback的函數。

由於IE/OP支持css的onload，所以寫這個方法的時候可以考慮非IE/OP才用2.2的方法判斷css加載完成。