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