IE8提示Invalid procedure call or argument 异常的解决方法
更新时间：2012年09月30日 20:56:18 作者：
某台机器上，访问公司的好几个产品网站，都抛出很多 Invalid procedure call or argument ，跟进了下，情况最后简化为
1. 环境：
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. 错误代码：
<!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是一个querySelectorAll的结果。els[2]会抛异常，而不是返回undefined.
4. QWrap代码错误点：在QWrap的selector里，有可能会出现对querySelectorAll结果取下标超界。参见以下代码的红色部分
/*
* nativeQuery(refEl,sSelector): 如果有原生的querySelectorAll，并且只是简单查询，则调用原生的query，否则返回null.
* @param {Element} refEl 参考元素
* @param {string} sSelector selector字符串
* @returns
*/
function nativeQuery(refEl, sSelector) {
if (hasNativeQuery && /^((^|,)\s*[.\w-][.\w\s\->+~]*)+$/.test(sSelector)) {
//如果浏览器自带有querySelectorAll，并且本次query的是简单selector，则直接调用selector以加速
//部分浏览器不支持以">~+"开始的关系运算符
var oldId = refEl.id,
tempId,
arr = [],
els;
if (!oldId && refEl.parentNode) { //标准的querySelectorAll中的selector是相对于:root的，而不是相对于: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”是一种常见写法，可是，碰到这台机器，却冏冏冏冏冏冏冏冏冏了。
6. 问题修复：
老老实实的改回代码A。OK了。
7. 延伸：
“下标超界抛异常，而不是返回undefined”这个坑好冏。。。
貌似那同学的机器访问淘宝页面，也有类似异常抛出，不知是否是同样原因。友情@淘宝同学一下。
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. 错误代码：
复制代码 代码如下:
<!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是一个querySelectorAll的结果。els[2]会抛异常，而不是返回undefined.
4. QWrap代码错误点：在QWrap的selector里，有可能会出现对querySelectorAll结果取下标超界。参见以下代码的红色部分
复制代码 代码如下:
/*
* nativeQuery(refEl,sSelector): 如果有原生的querySelectorAll，并且只是简单查询，则调用原生的query，否则返回null.
* @param {Element} refEl 参考元素
* @param {string} sSelector selector字符串
* @returns
*/
function nativeQuery(refEl, sSelector) {
if (hasNativeQuery && /^((^|,)\s*[.\w-][.\w\s\->+~]*)+$/.test(sSelector)) {
//如果浏览器自带有querySelectorAll，并且本次query的是简单selector，则直接调用selector以加速
//部分浏览器不支持以">~+"开始的关系运算符
var oldId = refEl.id,
tempId,
arr = [],
els;
if (!oldId && refEl.parentNode) { //标准的querySelectorAll中的selector是相对于:root的，而不是相对于: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”是一种常见写法，可是，碰到这台机器，却冏冏冏冏冏冏冏冏冏了。
6. 问题修复：
老老实实的改回代码A。OK了。
7. 延伸：
“下标超界抛异常，而不是返回undefined”这个坑好冏。。。
貌似那同学的机器访问淘宝页面，也有类似异常抛出，不知是否是同样原因。友情@淘宝同学一下。
相关文章
前几天一个同事问我如下的JavaScript代码如何理解2009-06-06
这篇文章主要介绍了javascript实现的闭包简单实现方法,涉及javascript闭包的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了微信小程序dom操作的替代思路,结合实例形式分析了微信小程序通过事件响应、动态操作元素属性来实现dom操作效果,需要的朋友可以参考下2018-12-12
ECharts提供了自适应功能,可以自动调整图表大小以适应屏幕变化,下面这篇文章主要给大家介绍了关于前端Echarts自适应分辨率和缩放功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了JavaScript实现密码框输入验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
阻止mousemove鼠标移动或touchmove触摸移动触发click点击事件
这篇文章主要为大家介绍了阻止mousemove或touchmove与click事件同时触发技巧，一个按钮绑定了多个事件，所以就要想办法阻止 mouse 鼠标事件或 touch 触摸事件 与 click 事件同时触发，不然每次拖拽按钮后都会触发 click 事件，这显然是不友好的2023-06-06
在有些时候我们无法控制乱码的出现, 比如发送邮件的时候有些邮件显示乱码, 比如Ajax返回数据总是乱码. 怎么办?2009-11-11
这篇文章主要介绍了js中的this作用域全解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本篇文章主要介绍了js获取浏览器各种属性的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
下面小编就为大家带来一篇浅谈JavaScript中变量和函数声明的提升。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论