IE8提示Invalid procedure call or argument 異常的解決方法
更新時(shí)間：2012年09月30日 20:56:18 作者：
某臺(tái)機(jī)器上，訪問(wèn)公司的好幾個(gè)產(chǎn)品網(wǎng)站，都拋出很多 Invalid procedure call or argument ，跟進(jìn)了下，情況最后簡(jiǎn)化為
1. 環(huán)境：
browser_info:"platform:Win32;msie;version:8.0;ie",
navigator:"appCodeName:Mozilla;appName:Microsoft Internet Explorer;appMinorVersion:Release Candidate 1;cpuClass:x86;platform:Win32;systemLanguage:zh-cn;userLanguage:zh-cn;appVersion:4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident\u002F4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729);userAgent:Mozilla\u002F4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident\u002F4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729);onLine:true;cookieEnabled:true"
2. 錯(cuò)誤代碼：
<!DOCTYPE html><html><head></head>
<body><div></div></body>
<script>
alert(document.body.querySelectorAll);
var els = document.body.querySelectorAll('div');
alert(els[2]);// 2 > els.length-1
</script>
</html>
3. 原因分析：
以上代碼中，els是一個(gè)querySelectorAll的結(jié)果。els[2]會(huì)拋異常，而不是返回undefined.
4. QWrap代碼錯(cuò)誤點(diǎn)：在QWrap的selector里，有可能會(huì)出現(xiàn)對(duì)querySelectorAll結(jié)果取下標(biāo)超界。參見(jiàn)以下代碼的紅色部分
/*
* nativeQuery(refEl,sSelector): 如果有原生的querySelectorAll，并且只是簡(jiǎn)單查詢，則調(diào)用原生的query，否則返回null.
* @param {Element} refEl 參考元素
* @param {string} sSelector selector字符串
* @returns
*/
function nativeQuery(refEl, sSelector) {
if (hasNativeQuery && /^((^|,)\s*[.\w-][.\w\s\->+~]*)+$/.test(sSelector)) {
//如果瀏覽器自帶有querySelectorAll，并且本次query的是簡(jiǎn)單selector，則直接調(diào)用selector以加速
//部分瀏覽器不支持以">~+"開(kāi)始的關(guān)系運(yùn)算符
var oldId = refEl.id,
tempId,
arr = [],
els;
if (!oldId && refEl.parentNode) { //標(biāo)準(zhǔn)的querySelectorAll中的selector是相對(duì)于:root的，而不是相對(duì)于:scope的
tempId = refEl.id = '__QW_slt_' + nativeQueryStamp++;
try {
els = refEl.querySelectorAll('#' + tempId + ' ' + sSelector);
} finally {
refEl.removeAttribute('id');
}
}
else{
els = refEl.querySelectorAll(sSelector);
}
for (var i = 0, elI; elI = els[i++];) arr.push(elI);
return arr;
}
return null;
}
5. 反思：
代碼A：for (var i = 0, len = els.length; i < len; i++) arr.push(els[i]);
代碼B：for (var i = 0, elI; elI = els[i++];) arr.push(elI);
用“代碼B”代替“代碼A”是一種常見(jiàn)寫(xiě)法，可是，碰到這臺(tái)機(jī)器，卻冏冏冏冏冏冏冏冏冏了。
6. 問(wèn)題修復(fù)：
老老實(shí)實(shí)的改回代碼A。OK了。
7. 延伸：
“下標(biāo)超界拋異常，而不是返回undefined”這個(gè)坑好冏。。。
貌似那同學(xué)的機(jī)器訪問(wèn)淘寶頁(yè)面，也有類似異常拋出，不知是否是同樣原因。友情@淘寶同學(xué)一下。
browser_info:"platform:Win32;msie;version:8.0;ie",
navigator:"appCodeName:Mozilla;appName:Microsoft Internet Explorer;appMinorVersion:Release Candidate 1;cpuClass:x86;platform:Win32;systemLanguage:zh-cn;userLanguage:zh-cn;appVersion:4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident\u002F4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729);userAgent:Mozilla\u002F4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident\u002F4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729);onLine:true;cookieEnabled:true"
2. 錯(cuò)誤代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html><html><head></head>
<body><div></div></body>
<script>
alert(document.body.querySelectorAll);
var els = document.body.querySelectorAll('div');
alert(els[2]);// 2 > els.length-1
</script>
</html>
3. 原因分析：
以上代碼中，els是一個(gè)querySelectorAll的結(jié)果。els[2]會(huì)拋異常，而不是返回undefined.
4. QWrap代碼錯(cuò)誤點(diǎn)：在QWrap的selector里，有可能會(huì)出現(xiàn)對(duì)querySelectorAll結(jié)果取下標(biāo)超界。參見(jiàn)以下代碼的紅色部分
復(fù)制代碼 代碼如下:
/*
* nativeQuery(refEl,sSelector): 如果有原生的querySelectorAll，并且只是簡(jiǎn)單查詢，則調(diào)用原生的query，否則返回null.
* @param {Element} refEl 參考元素
* @param {string} sSelector selector字符串
* @returns
*/
function nativeQuery(refEl, sSelector) {
if (hasNativeQuery && /^((^|,)\s*[.\w-][.\w\s\->+~]*)+$/.test(sSelector)) {
//如果瀏覽器自帶有querySelectorAll，并且本次query的是簡(jiǎn)單selector，則直接調(diào)用selector以加速
//部分瀏覽器不支持以">~+"開(kāi)始的關(guān)系運(yùn)算符
var oldId = refEl.id,
tempId,
arr = [],
els;
if (!oldId && refEl.parentNode) { //標(biāo)準(zhǔn)的querySelectorAll中的selector是相對(duì)于:root的，而不是相對(duì)于:scope的
tempId = refEl.id = '__QW_slt_' + nativeQueryStamp++;
try {
els = refEl.querySelectorAll('#' + tempId + ' ' + sSelector);
} finally {
refEl.removeAttribute('id');
}
}
else{
els = refEl.querySelectorAll(sSelector);
}
for (var i = 0, elI; elI = els[i++];) arr.push(elI);
return arr;
}
return null;
}
5. 反思：
代碼A：for (var i = 0, len = els.length; i < len; i++) arr.push(els[i]);
代碼B：for (var i = 0, elI; elI = els[i++];) arr.push(elI);
用“代碼B”代替“代碼A”是一種常見(jiàn)寫(xiě)法，可是，碰到這臺(tái)機(jī)器，卻冏冏冏冏冏冏冏冏冏了。
6. 問(wèn)題修復(fù)：
老老實(shí)實(shí)的改回代碼A。OK了。
7. 延伸：
“下標(biāo)超界拋異常，而不是返回undefined”這個(gè)坑好冏。。。
貌似那同學(xué)的機(jī)器訪問(wèn)淘寶頁(yè)面，也有類似異常拋出，不知是否是同樣原因。友情@淘寶同學(xué)一下。
相關(guān)文章
javascript實(shí)現(xiàn)前端成語(yǔ)點(diǎn)擊驗(yàn)證
這篇文章主要介紹了javascript實(shí)現(xiàn)前端成語(yǔ)點(diǎn)擊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
從此例子中發(fā)現(xiàn)，js對(duì)"" 與 " " ，注意中間還有一空格，解析是非常嚴(yán)格的。在java與net中還有待于研究。2009-12-12
這篇文章主要介紹了使用pkg打包ThinkJS項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
js 字?jǐn)?shù)統(tǒng)計(jì)，區(qū)分英漢
hta實(shí)現(xiàn)的字?jǐn)?shù)統(tǒng)計(jì)效果代碼，中文算兩個(gè)，英文算一個(gè)2008-02-02
js 鏈?zhǔn)窖舆t執(zhí)行DOME，需要的朋友可以參考下。2012-01-01
徹底搞懂JS無(wú)縫滾動(dòng)代碼...
2007-01-01 
這篇文章主要給大家介紹了關(guān)于JS中向?qū)ο笾刑砑訉?duì)象的3種方法,在JavaScript中對(duì)象可以通過(guò)兩種方法添加對(duì)象,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07 
簡(jiǎn)介alert()與console.log()的不同
alert（）和console.log()在程序中經(jīng)常會(huì)用到，大家知道他們的區(qū)別嗎，接下來(lái)，通過(guò)本文給大家介紹alert()與console.log()的不同，需要的朋友可以參考下
2015-08-08 
容易被忽略的JS腳本特性，學(xué)習(xí)js的朋友可以參考下。
2011-09-09