整理一下常见的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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 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
NOT NULL 和NULL
2007/01/15 PHP
生成卡号php代码
2008/04/09 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
Python中bisect的用法
2014/09/23 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
Python Pillow Image Invert
2019/01/22 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python print出共轭复数的方法详解
2019/06/25 Python
Django 静态文件配置过程详解
2019/07/23 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Python文件操作方法详解
2020/02/09 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
英国森林假期:Forest Holidays
2021/01/01 全球购物
建筑人员岗位职责
2013/12/25 职场文书
求职简历自荐信
2014/06/18 职场文书
法制宣传标语
2014/06/23 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
Python编解码问题及文本文件处理方法详解
2021/06/20 Python