整理一下常见的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实现的图片点击滚动效果
Apr 29 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
python图像处理之反色实现方法
2015/05/30 Python
python使用super()出现错误解决办法
2017/08/14 Python
浅谈Python NLP入门教程
2017/12/25 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Python如何执行系统命令
2020/09/23 Python
个人近期表现材料
2014/02/11 职场文书
财务会计专业自荐书
2014/06/30 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android