整理一下常见的IE错误


Posted in Javascript onNovember 18, 2016

多年以来,IE一直都是最难于调试JavaScript 错误的浏览器。IE给出的错误消息一般很短又语焉不详。而且上下文信息也很少,有时甚至一点都没有。下面几小节将分别探讨一些在IE中难于调试的JavaScript 错误。

操作终止

在IE8 之前的版本中,存在一个相对于其他浏览器而言,最令人迷惑、讨厌,也最难于调试的错误:操作终止(operation aborted)。在修改尚未加载完成的页面时,就会发生操作终止错误。发生错误时,会出现一个模态对话框,告诉你“操作终止。"单击确定(OK) 按钮,则卸载整个页面,继而显示一张空白屏幕;此时要进行调试非常困难。下面的示例将会导致操作终止错误。

<body>
  <div>
    <script>
      document.body.appendChild(document.createElement("div")); 
    </script>
  </div> 
</body>

这个例子中存在的问题是:JavaScript代码在页面尚未加载完毕时就要修改document.body,而且script元素还不是body元素的直接子元素。准确一点说,当script节点被包含在某个元素中,而且JavaScript代码又要使用appendChi1d、innerHTML或其他DOM 方法修改该元素的父元素或祖先元素时,将会发生操作终止错误(因为只能修改已经加载完毕的元素)。

要避免这个问题,可以等到目标元素加载完毕后再对它进行操作,或者使用其他操作方法。例如,为document.body添加一个绝对定位在页面上的覆盖层,就是一种非常常见的操作。通常,开发人员都是使用appendChild方法来添加这个元素的,但换成使用insertBefore()方法也很容易。因此,只要修改前面例子中的一行代码,就可以避免操作终止错误。

<body>
  <div>
    <script>
      document.body.lnsertBefore(document.createElement("div"), document.body.firstChild);
    </script>
  </div> 
</body>

在这个例子中,新的div元素被添加至document.body的开头部分而不是末尾。因为完成这一操作所需的所有信息在脚本运行时都是已知的,所以这不会引发错误。

除了改变方法之外,还可以把script元素从包含元素中移出来,直接作为body的子元素。例如:

<body>
  <div>
  </div>
    <script>
      document.body.appendChild(document.createElement("div"));
    </script>
</body>

这一次也不会发生错误,因为脚本修改的是它的直接父元素,而不再是间接的祖先元素。

在同样的情况下,IE8不再抛出操作终止错误,而是抛出常规的JavaScript 错误,带有如下错误消息:

HTML Parsing Error: unable to modify the parent Container element before the child element is closed (KB927917).

不过,虽然浏览器抛出的错误不同,但解决方案仍然是一样的。

无效字符
根据语法,JavaScript 文件必须只包含特定的字符。在JavaScript 文件中存在无效字符时, IE会抛出无效字符( invalid character )错误。所谓无效字符,就是JavaScript语法中未定义的字符。例如,有一个很像减号但却由Unicode 值8211 表示的字符( \u2013 ),就不能用作常规的减号( ASCII 编码为45 ),因为JavaScript 语法中没有定义该字符。这个字符通常是在Word 文档中自动插入的。如果你的代码是从Word 文档中复制到文本编辑器中,然后又在IE 中运行的,那么就可能会遇到无效字符错误。其他浏览器对无效字符做出的反应与IE类似,Firefox会抛出非法字符(iIlegal character) 错误,Safari会报告发生了语法错误,而Opera 则会报告发生了ReferenceError (引用错误)。因为它会将无效字符解释为未定义的标识符。

未找到成员
IE中的所有DOM对象都是以COM 对象,而非原生JavaScript对象的形式实现的。这会导致一些与垃圾收集相关的非常奇怪的行为。IE中的未找到成员( Member not found )错误,就是由于垃圾收集例程配合错误所直接导致的。

具体来说,如果在对象被销毁之后,又给该对象赋值,就会导致未找到成员错误。而导致这个错误的,一定是COM 对象。发生这个错误的最常见情形是使用event 对象的时候。IE中的event对象是window的属性,该对象在事件发生时创建,在最后一个事件处理程序执行完毕后销毁。假设你在一个闭包中使用了event 对象,而该闭包不会立即执行,那么在将来调用它并给event 的属性赋值时,就会导致未找到成员错误,如下面的例子所示。

document.onclick = function () {
  var event = window.event;
  setTimeout(function (){
    event.returnValue = false; //未找到成员错误
  }, 1000);
};

在这段代码中,我们将一个单击事件处理程序指定给了文档。在事件处理程序中,window.event被保存在event 变量中。然后,传人setTimeout()中的闭包里又包含了event变量。当单击事件处理程序执行完毕后,event 对象就会被销毁,因而闭包中引用对象的成员就成了不存在的了。换句话说,由于不能在COM对象被销毁之后再给其成员赋值,在闭包中给returnValue 赋值就会导致未找到成员错误。

未知运行时错误

当使用innerHTML或outerHTML以下列方式指定HTML时,就会发生未知运行时错误( Unknown runtime error ):一是把块元素插入到行内元素时, 二是访问表格任意部分( table 、 tbody等)的任意属性时。例如,从技术角度说,span标签不能包含div之类的块级元素,因此下面的代码就会导致未知运行时错误:

span.innerHTML = "div Hi /div";  //这里,span包含了div元素
在遇到把块级元素插入到不恰当位置的情况时,其他浏览器会尝试纠正并隐藏错误,而IE在这一点上反倒很较真儿。

语法错误

通常,只要IE一报告发生了语法错误( syntax error ),都可以很快找到错误的原因。这时候,原因可能是代码中少了一个分号,或者花括号前后不对应。然而,还有一种原因不十分明显的情况需要格外注意。

如果你引用了外部的JavaScript 文件,而该文件最终并没有返回JavaScript代码,IE也会抛出语法错误。例如,script元素的src特性指向了一个HTML文件,就会导致语法错误。报告语法错误的位置时,通常都会说该错误位于脚本第一行的第一个字符处。Opera 和Safari 也会报告语法错误,但它们会给出导致问题的外部文件的信息;IE就不会给出这个信息,因此就需要我们自己重复检查一遍引用的外部JavaScript文件。但Firefox会忽略那些被当作JavaScript 内容嵌入到文档中的非JavaScript文件中的解析错误。

在服务器端组件动态生成JavaScript 的情况下,比较容易出现这种错误。很多服务器端语言都会在发生运行错误时,向输出中插入HTML代码,而这种包含HTML的输出很容易就会违反JavaScript语法。如果在追查语法错误时遇到了麻烦,我们建议你再仔细检查一遍引用的外部文件,确保这些文件中没有包含服务器因错误而插入到其中的HTML。

系统无法找到指定资源
系统无法找到指定资源(The system cannot locate the resource specified )这种说法,恐陷要算是IE给出的最有价值的错误消息了。在使用JavaScript 请求某个资源URL ,而该URL的长度超过了IE 对URL最长不能超过2083个字符的限制时,就会发生这个错误。IE不仅限制JavaScript中使用的URL的长度,而且也限制用户在浏览器自身中使用的URL长度(其他浏览器对URL 的限制没有这么严格)。IE 对URL路径还有一个不能超过2048个字符的限制。下面的代码将会导致错误。

function createLongUrl(url){
  var s = "?";
  for (var i=0, len= 2500; i < len; i++){
    s += "a" ;
  }
  return url + s;
}

var x = new XMLHttpRequest( );
x.open("get", createLongUrl("http://www.somedomain.com/"), true);
x.send(null);

在这个例子中,XMLHttpRequest对象试图向一个超出最大长度限制的URL发送请求。在调用open()方法时,就会发生错误。避免这个问题的办法,无非就是通过给查询字符参数起更短的名字,或者减少不必要的数据,来缩短查询字符串的长度。另外,还可以把请求方法改为POST,通过请求体而不是查询字符串来发送数据。

Javascript 相关文章推荐
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
微信小程序登录换取token的教程
May 31 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
微信小程序 根据不同用户切换不同TabBar
Apr 21 Javascript
require、backbone等重构手机图片查看器
Nov 17 #Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 #Javascript
移动端js图片查看器
Nov 17 #Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 #Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 #Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 #Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 #Javascript
You might like
PHP高级OOP技术演示
2009/08/27 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
Yii实现简单分页的方法
2016/04/29 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
Python实现拼接多张图片的方法
2014/12/01 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python实现堆排序的方法详解
2016/05/03 Python
python决策树之C4.5算法详解
2017/12/20 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
优秀教师主要事迹
2014/02/01 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
北京天坛导游词
2015/02/12 职场文书
初中生活随笔
2015/08/15 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
python基础之模块的导入
2021/10/24 Python
python中对列表的删除和添加方法详解
2022/02/24 Python