Я успешно показываю фотографию в Firefox версии 22 - в двух разных тегах img - один из тегов img не имеет установленной ширины или высоты CSS, поэтому изображение отображается в исходном размере.
Второй тег img задается стилем CSS как 60 пикселей на 60 пикселей.
Когда я устанавливаю 'innerHTML' этих двух тегов img, в Firefox я вижу изображение исходного размера и такое же изображение, уменьшенное, чтобы поместиться в тег img размером 60 на 60 пикселей.
В IE версии 10.0.9 я просто не вижу ничего во втором налоге на img, который через CSS установлен как 60 на 60 пикселей.
Это тот же самый код, который выполняется. Что мне нужно сделать, чтобы IE показывал изображение в теге img размером 60 на 60 пикселей, которого здесь нет в моем коде?
Между прочим, приведенный ниже код создается в файле PHP - я использую подход «скрытый iframe» для загрузки, а затем отображения изображения на веб-странице - приведенный ниже код создается в файле PHP, а затем выводит то, что вы видите ниже. в мой скрытый iframe на моей html-странице, поэтому вы видите здесь код, получающий родительский документ iframe:
<script language="JavaScript" type="text/javascript">
var parDoc = parent.document;
parDoc.getElementById('justOpenedImage').innerHTML =
'<div><img src=\'http://localhost/thesite/aPhoto.jpg\' /></div>';
parDoc.getElementById('60by60').innerHTML =
'<div><img class="60by60Image" src=\'http://localhost/thesite/aPhoto.jpg\' /></div>';
</script>
Вот CSS-класс 60by60Image:
.60by60Image
{
border: 2px solid green;
width: 60px;
height: 60px;
display: inline-block;
}
Вот HTML на странице:
<!-- THE ORIGINAL-SIZED IMAGE APPEARS FINE HERE IN BOTH IE AND FF -->
<div id="justOpenedImage"></div>
<!-- THE SMALLER IMAGE APPEARS HERE IN FIREFOX BUT NOT IN IE -->
<div>
<img class="60by60Image" id="60by60" src="" />
</div>
Это нормально работает в Firefox, но в IE не удается отобразить меньшую версию изображения 60 на 60 - не знаю почему.
1 ответ
Вы устанавливаете innerHTML
изображения. После выполнения вашего скрипта дерево документа выглядит примерно так:
<div>
<img class="60by60Image" id="60by60" src="">
<div><img class="60by60Image" src='http://localhost/thesite/aPhoto.jpg' /></div>
</img>
</div>
Я думаю, что IE просто не справляется с этим. По крайней мере, это не валидный HTML.
Вы можете исправить это, добавив атрибут id="60by60"
к родительскому div и удалив его из img. Разрешение javascript изменять innerHTML
div вместо изображения.
<div id="60by60">
<img class="60by60Image" src="">
</div>
Или измените атрибут изображения src
.
parDoc.getElementById('60by60').src = 'http://localhost/thesite/aPhoto.jpg';
Похожие вопросы
Связанные вопросы
Новые вопросы
php
PHP — это широко используемый язык сценариев общего назначения с открытым исходным кодом, мультипарадигмальный, динамически типизированный и интерпретируемый, изначально разработанный для веб-разработки на стороне сервера. Используйте этот тег для вопросов о программировании на языке PHP.
innerHTML
изображения (вместо этого у него не должно быть этого свойства. Try setting the
innerHTML` оболочки<div>
.