17.4 常见的IE 错误

优质

小牛编辑

126浏览

2023-12-01

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

17.4.1 操作终止

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

<!DOCTYPE html>
<html>
<head>
<title>Operation Aborted Example</title>
</head>
<body>
<p>The following code should cause an Operation Aborted error in IEversions prior to 8.</p>
<div><script type="text/javascript">
document.body.appendChild(document.createElement("div"));
</script>
</div>
</body>
</html>

运行一下这个例子中存在的问题是：JavaScript 代码在页面尚未加载完毕时就要修改document.body，而且<script>元素还不是<body>元素的直接子元素。准确一点说，当<script>节点被包含在某个元素中，而且JavaScript 代码又要使用appendChild()、innerHTML 或其他DOM 方法修改该元素的父元素或祖先元素时，将会发生操作终止错误（因为只能修改已经加载完毕的元素）。要避免这个问题，可以等到目标元素加载完毕后再对它进行操作，或者使用其他操作方法。例如，为document.body 添加一个绝对定位在页面上的覆盖层，就是一种非常常见的操作。通常，开发人员都是使用appendChild()方法来添加这个元素的，但换成使用insertBefore()方法也很容易。因此，只要修改前面例子中的一行代码，就可以避免操作终止错误。

<!DOCTYPE html>
<html>
<head>
<title>Operation Aborted Example</title>
</head>
<body>
<p>The following code should not cause an Operation Aborted error in IEversions prior to 8.</p>
<div><script type="text/javascript">
document.body.insertBefore(document.createElement("div"),
document.body.firstChild);
</script>
</div>
</body>
</html>

运行一下在这个例子中，新的<div>元素被添加到document.body 的开头部分而不是末尾。因为完成这一操作所需的所有信息在脚本运行时都是已知的，所以这不会引发错误。除了改变方法之外，还可以把<script>元素从包含元素中移出来，直接作为<body>的子元素。例如：图灵社区会员 StinkBC(StinkBC@gmail.com) 专享尊重版权

<!DOCTYPE html>
<html>
<head>
<title>Operation Aborted Example</title>
</head>
<body>
<p>The following code should not cause an Operation Aborted error in IEversions prior to 8.</p>
<div></div>
<script type="text/javascript">
document.body.appendChild(document.createElement("div"));
</script>
</body>
</html>

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

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

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

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

17.4.2 无效字符

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

17.4.3 未找到成员

如前所述，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 赋值就会导致未找到成员错误。

17.4.4 未知运行时错误

当使用innerHTML 或outerHTML 以下列方式指定HTML 时，就会发生未知运行时错误（Unknownruntime error）：一是把块元素插入到行内元素时，二是访问表格任意部分（<table>、<tbody>等）的任意属性时。例如，从技术角度说，<span>标签不能包含<div>之类的块级元素，因此下面的代码就会导致未知运行时错误： span.innerHTML = "<div>Hi</div>"; //这里，span 包含了<div>元素在遇到把块级元素插入到不恰当位置的情况时，其他浏览器会尝试纠正并隐藏错误，而IE 在这一点上反倒很较真儿。

17.4.5 语法错误

通常，只要IE 一报告发生了语法错误（syntax error），都可以很快找到错误的原因。这时候，原因可能是代码中少了一个分号，或者花括号前后不对应。然而，还有一种原因不十分明显的情况需要格外注意。如果你引用了外部的JavaScript 文件，而该文件最终并没有返回JavaScript 代码，IE 也会抛出语法错误。例如，<script>元素的src 特性指向了一个HTML 文件，就会导致语法错误。报告语法错误的位置时，通常都会说该错误位于脚本第一行的第一个字符处。Opera 和Safari 也会报告语法错误，但它们会给出导致问题的外部文件的信息；IE 就不会给出这个信息，因此就需要我们自己重复检查一遍引用的外部JavaScript 文件。但Firefox 会忽略那些被当作JavaScript 内容嵌入到文档中的非JavaScript 文件中的解析错误。在服务器端组件动态生成JavaScript 的情况下，比较容易出现这种错误。很多服务器端语言都会在发生运行时错误时，向输出中插入HTML 代码，而这种包含HTML 的输出很容易就会违反JavaScript语法。如果在追查语法错误时遇到了麻烦，我们建议你再仔细检查一遍引用的外部文件，确保这些文件中没有包含服务器因错误而插入到其中的HTML。

17.4.6 系统无法找到指定资源

系统无法找到指定资源（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，通过请求体而不是查询字符串来发送数据。有关Ajax（或者说XMLHttpRequest 对象）的详细内容，将在第21章全面讨论。