僅IE9/10同時支持script元素的onload和onreadystatechange事件分析
更新時間：2011年04月27日 00:05:09 作者：
測試結果可以看出，IE9后已經開始支持script的onload事件了。一直以來我們判斷js文件是否已經加載完成就是用以上的兩個事件。
如下
<!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();
}
}
這種寫法現(xiàn)在也沒有問題。但如下寫法可能會讓的回調在IE9/10中執(zhí)行兩次
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
callback();
}
}
這種寫法的取巧之處在于onload和onreadystatechage都用同一個函數，F(xiàn)irefox/Safari/Chrome/Opera中不支持onreadystatechage事件，也沒有readyState屬性，所以 !this.readyState 是針對這些瀏覽器。readyState是針對IE瀏覽器，載入完畢的情況是loaded，緩存的情況下可能會出現(xiàn)readyState為complete。所以兩個不能少。但由于IE9/10也已經支持onload事件了，會造成callback執(zhí)行2次。
復制代碼 代碼如下:
<!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();
}
}
這種寫法現(xiàn)在也沒有問題。但如下寫法可能會讓的回調在IE9/10中執(zhí)行兩次
復制代碼 代碼如下:
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
callback();
}
}
這種寫法的取巧之處在于onload和onreadystatechage都用同一個函數，F(xiàn)irefox/Safari/Chrome/Opera中不支持onreadystatechage事件，也沒有readyState屬性，所以 !this.readyState 是針對這些瀏覽器。readyState是針對IE瀏覽器，載入完畢的情況是loaded，緩存的情況下可能會出現(xiàn)readyState為complete。所以兩個不能少。但由于IE9/10也已經支持onload事件了，會造成callback執(zhí)行2次。
http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1
相關文章
這篇文章主要為大家詳細介紹了js獲取地址欄參數的兩種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了JavaScript遍歷對象的七種方法匯總，文章通過從屬性可枚舉性問題與遍歷方法兩個大方面講述全文，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了JS繪制生成花瓣效果的方法,涉及javascript數學運算及頁面元素操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
每個函數創(chuàng)建時默認帶有一個prototype屬性，其中包含一個constructor屬性，和一個指向Object對象的隱藏屬性,需要的朋友可以參考下2012-11-11
Javascript Cookie讀寫刪除操作的函數代碼，需要操作cookies的朋友可以參考下。2010-03-03
詳解JSONObject和JSONArray區(qū)別及基本用法
這篇文章主要介紹了詳解JSONObject和JSONArray區(qū)別及基本用法,需要的朋友可以參考下2017-10-10
JavaScript中的atob和btoa函數及base64編碼解碼詳解
在JavaScript中btoa和atob是兩個處理Base64編碼的全局函數,它們通常用于在瀏覽器環(huán)境中對二進制數據進行編碼和解碼,這篇文章主要介紹了JavaScript中atob和btoa函數及base64編碼解碼的相關資料,需要的朋友可以參考下2025-04-04
JavaScript實現(xiàn)數組去重的14種方法大全
親愛的小伙伴,對于數組javascript中的數組去重方法你知道多少種呢？學會如何對數組進行去重對于javascript的學習來說也是十分重要的,下邊就讓我來分享一下我所知道的集中數組去重的方法吧,感興趣的小伙伴跟著小編一起來看看吧2025-03-03
下面小編就為大家分享一篇淺談MUI框架中加載外部網頁或服務器數據的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細解析了Bootstrap模態(tài)窗口源碼，基本每行都加了注釋，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02