Question

我正在使用document.write()调试一些代码，并在IE8中发现了一些非常奇怪的行为。是我，还是这个错误？！

只有4个img元素的页面：

<img src="img/one.jpg" width="100" height="75" alt="1st Demo Image" title="">
<img src="img/two.jpg" width="100" height="75" alt="2nd Demo Image" title="">
<img src="img/three.jpg" width="100" height="75" alt="3rd Demo Image" title="">
<img src="img/four.jpg" width="100" height="75" alt="4th Demo Image" title="">

循环使用document.images HTMLCollection，使用document.write()输出每个图片的width属性值（或document.writeln()并不重要）：

for (var i=0; i<document.images.length; i++) {
    document.writeln(i + ' - ' + document.images[i]['width']);
}

除IE8外，所有浏览器都按预期输出4行。但是，IE8只为第一张图像输出第一行！为什么呢？！

循环'循环'确定。您可以使用width输出alert()属性，并在IE8中获得4个警报，但仍然只使用document.write()输出第一行！

for (var i=0; i<document.images.length; i++) {
    document.writeln(i + ' - ' + document.images[i]['width']);
    alert(i + ' - ' + document.images[i]['width']);    // Alerts 4 times
}

'height'属性也是一个问题。然而，其他属性，如'src'，'alt'甚至未定义的属性，如'monkey'输出OK;为你提供不在循环中也有alert()！

如果从循环中取出document.write()，请在循环内附加一个字符串，在循环后只有1 document.write()输出字符串然后就可以了。

通过NodeList ... document.getElementsByTagName('img')[i].width访问width属性也是一个问题 - 与上面相同的问题，只输出第一行！

有什么想法吗？或者它只是一个'IE8'的怪癖！？

修改＃1

此代码不正在某个事件中运行，例如onload。它正在页面正文中的脚本元素中运行，同时正在解析页面。是的，您无法在事件中调用document.write()，希望影响当前文档，因为文档解析可能已经完成，并且调用document.write()将隐式打开新文档。

此问题仅在IE8上显示 IE6，IE7，IE9和所有其他测试的浏览器都按预期工作。

编辑＃2 - 找到原因（但不是原因）

好的，我认为我的测试页很简单 - 看起来不够简单！我想我已经找到了这个问题的原因（不是原因），但不幸的是，这就是它变得怪异的地方！

问题似乎是产生输出的脚本元素直接位于display:block的元素内。这不一定是一个本质上是块级元素的元素（如div或pre），而是display:block的任何元素！块容器和脚本元素之间必须没有空格。

因此，这个确切的代码（在body标签之间）在IE8中重现了这个问题：

<img src="img/one.jpg" width="100" height="75" alt="1st Demo Image">
<img src="img/two.jpg" width="100" height="75" alt="2nd Demo Image">
<img src="img/three.jpg" width="100" height="75" alt="3rd Demo Image">
<img src="img/four.jpg" width="100" height="75" alt="4th Demo Image">
<pre><script type="text/javascript">
// Only the first line is output in IE8, other browsers OK
for (var i=0; i<document.images.length; i++) {
    document.writeln(i + ' - ' + document.images[i]['width']);
}
</script></pre>

但是，如果您在打开<pre>标记后只放置一个空格，问题就会消失（但输出中会有额外的空间）！

而且，这似乎只会影响width和height（数字？）属性！

Answer 1

大概是你的document.write清除了文档（我是not sure，如果这是依赖于规范或实现，但会调用document.open()来清除文档，包括图像）。因此，在第一次document.write()调用清除文档后，不再有图像，因此当循环继续访问document.images[1]时，该项目将不再可用。

这解释了为什么任何其他方法都有效，因为警告或连接字符串不会清除文档。

Answer 2

如果在载入文档后运行，文档将覆盖正文的内容。

试试这个：

var htm = [];
for (var i=0; i<document.images.length; i++) {
    htm.push(i + ' - ' + document.images[i]['width']); 
}

document.write(htm.join(''));

IE8中的document.write（）和document.images [i] .width失败了！

2 个答案: