IE8提示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”这个坑好冏。。。

  貌似那同学的机器访问淘宝页面,也有类似异常抛出,不知是否是同样原因。友情@淘宝同学一下。