document.write () и document.images [i] .width терпит неудачу в IE8!

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="">

Цикл по HTMLCollection document.images для вывода значения шириныАтрибут для каждого изображения, используя document.write() (или document.writeln() это не имеет значения):

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

Все браузеры, кроме IE8, выводят 4 строки, как и ожидалось.IE8, однако, просто выводит 1-ю строку для первого изображения!Почему?!

Цикл «зацикливается» ОК.Вы можете вывести атрибут width, используя alert(), и вы получите 4 оповещения в IE8, но по-прежнему выводится только первая строка, используя 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() из цикла, добавьте строку внутри цикла и получите только 1document.write() после цикла для вывода строки, тогда все в порядке.

Также проблема с доступом к атрибуту ширины через NodeList ... document.getElementsByTagName('img')[i].width - та же проблема, что и выше, только первая строкавывод!

Есть идеи?Или это просто причуда 'IE8'??

EDIT # 1

Этот код не запускается в событии, как onload.Он запускается в элементе script в теле страницы, в то время как страница анализируется.Да, вы не можете вызвать document.write() в событии, надеясь повлиять на текущий документ, так как синтаксический анализ документа, вероятно, завершится, и вызов document.write() неявно откроет новый документ.

Эта проблема * только 1047 * проявляется в IE8.
IE6, IE7, IE9 и все другие протестированные браузеры работают должным образом.

EDIT # 2 - найдена причина (но не причина)

Хорошо, я думал, что моя тестовая страница была очень простой - кажется, она не была достаточно простой!Я думаю, что я нашел причину (а не причину) этой проблемы, но, к сожалению, именно здесь она становится еще более странной!

Проблема заключается в том, что элемент скрипта, генерирующий вывод, находится непосредственно внутри элементаэто display:block.Это не обязательно должен быть элемент, который по своей сути является элементом уровня блока (например, div или pre), но любой элемент, который является display:block!Между контейнером блока и элементом script не должно быть пробелов.

Итак, этот точный код (между тегами body) воспроизводит эту проблему в IE8:

<code><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> поставить только один пробел, проблема исчезнет (но вы получите дополнительный пробел в выводе)!

И это только кажетсявлияют на атрибуты width и height (числовые?)!

Answer 1

Документ перезапишет содержимое тела, если он запускается после загрузки документа.

Попробуйте это:

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

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

Answer 2

Предположительно, ваш document.write очищает документ (я не уверен , если это зависит от спецификации или реализации, но это вызовет document.open(), который очистит документ, включая изображения). Таким образом, после первого вызова document.write() документ очищается, изображений больше нет, поэтому, когда цикл продолжает обращаться к document.images[1], элемент больше не доступен.

Это объясняет, почему любой другой метод работает, так как оповещение или конкатенация строки не очистят документ.