document.write（）和document.images [i] .width在IE8中失敗！

Question

我使用document.write()只是調試一些代碼，並發現在IE8中的一些非常奇怪的行爲。是我嗎，還是這是一個錯誤？

只有4 img元件A頁：

<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()各圖像的寬度屬性的值（或document.writeln()沒關係）：

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

除IE8外，所有瀏覽器都按預期輸出4行。但是，IE8只輸出第一行，用於第一個圖像！爲什麼？！

循環「循環」確定。您可以使用alert()輸出width屬性，並在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 
} 

'高度'屬性也是一個問題。其他屬性，如'src'，'alt'，甚至像'monkey'這樣的未定義的屬性輸出OK;爲您提供不要在循環中也有一個alert()！

如果你將document.write()從循環中取出，追加到循環中的字符串，並且在循環後只有1 document.write()以輸出字符串，那麼就是OK。

通過NodeList訪問寬度屬性也是一個問題... document.getElementsByTagName('img')[i].width - 與上面相同的問題，只輸出第一行！

任何想法？或者它只是一個'IE8'的怪癖！？

EDIT＃1

此代碼是不在事件中運行，像onload。它正在頁面正文的腳本元素中運行，而頁面正在被解析。是的，您不能在事件中調用document.write()，希望影響當前文檔，因爲文檔解析可能已完成，並且調用document.write()將隱式地打開新文檔。

此問題只有體現在IE8上。
IE6，IE7，IE9和其他所有測試過的瀏覽器都按預期工作。

編輯＃2 - 發現原因（但不是這個原因）

好吧，我想我的測試頁面很簡單 - 它似乎是不太夠簡單！我想我已經找到了這個問題的原因（不是原因），但不幸的是這是它變得更加怪異的地方！

問題似乎是，如果生成輸出的腳本元素直接在display:block的元素內。這並不一定是塊級元素（如div或pre）的元素，但是任何元素都是display:block！塊容器和腳本元素之間不能有空格。

所以，這個確切的代碼（身體標記之間）再現了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清除文檔（如果是依據規範或實現的依賴關係，那麼它將調用document.open()來清除文檔，包括圖像），我將清除該文檔（我是not sure）。因此，在第一個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(''));