首頁 > 開發者 > JavaScript
如下
複製代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>IE9/10同時支援script元素的onload和onreadystatechange事件</title>
<script src="http://code.jquery.com/jquery.min.js" onload="alert(1)" onreadystatechange="alert(2)"></script>
</head>
<body>
</body>
</html>
結果：
IE6/7/8 : 彈出2
IE9/10 : 彈出2，1
Firefox/Safari/Chrome/Opera : 彈出1
測試結果可以看出，IE9後已經開始支援script的onload事件了。一直以來我們判斷js檔案是否已經載入完成就是用以上的兩個事件。很久以前就知道IE中使用onreadystatechange事件，事件handler中使用readyState的值判斷是否載入完成。其它瀏覽器使用onload事件。
複製代碼 代碼如下:
if(isIE){
script.onreadystatechange = function(){
if(this.readyState == 'loaded' || this.readyState == 'complete'){
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
這種寫法現在也沒有問題。但如下寫法可能會讓的回調在IE9/10中執行兩次
複製代碼 代碼如下:
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
callback();
}
}
這種寫法的取巧之處在於onload和onreadystatechage都用同一個函數，Firefox/Safari/Chrome/Opera中不支援onreadystatechage事件，也沒有readyState屬性，所以 !this.readyState 是針對這些瀏覽器。readyState是針對IE瀏覽器，載入完畢的情況是loaded，緩衝的情況下可能會出現readyState為complete。所以兩個不能少。但由於IE9/10也已經支援onload事件了，會造成callback執行2次。
相關：
http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1
http://www.w3.org/TR/html5/scripting-1.html#script
https://developer.mozilla.org/En/HTML/Element/Script
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
