Предзагрузочная картинка в iframe

sigma77 · January 13, 2011

Всем привет!

Ситуация следующая.

Имеется iframe, который устанавливается на сторонних сайтах. Это iframe содержит генерируемый контент, которого может быть как мало, так и много. Соответственно из вне я на него повлиять не могу, только, если через атрибуты. iframe вставляется на сторонний сайт скриптом.

Так вот. Поскольку данных может быть много, содержимое может прогружаться достаточно долго. На это время нужно поставить какую-нибудь картинку-заглушку, а ля "идет загрузка".

В лоб (вставка скрипта и картинки в тело подгружаемого документа) проблему решить не удалось, т.к. содержимое отображается только после полной загрузки документа. Как еще можно решить проблему?

Спасибо

Great Rash · January 13, 2011

Обернуть все содержимое ифрейма в контейнер, которому сказать display: none;. Как только сработало window.onload сказать контейнеру display: block;

UPD: window ифрейма должен быть конечно же. Или на <body onload=""> написать, для верности.

sigma77 · January 13, 2011

Обернуть все содержимое ифрейма в контейнер, которому сказать display: none;. Как только сработало window.onload сказать контейнеру display: block;
UPD: window ифрейма должен быть конечно же. Или на <body onload=""> написать, для верности.

Немного не поняла, куда картинку при этом пихать.

Сделала так:

document.write("<div class=\"zzz\"><div id=\'xxx\'><img style=\"position: absolute;\" src=\".....\"></div><iframe onload=\" document.getElementById(\'xxx\').style.display=\'none\'\" >Ваш браузер не поддерживает плавающие фреймы!</iframe></div>")

Насколько это правильно?

Great Rash · January 13, 2011

Немного не поняла, куда картинку при этом пихать.

Картинку пихать в другой контейнер, который прятать после загрузки документа.

А что такое #zzz и #xxx?

UPD: Вот, замутил примерчик:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>

	<script type="text/javascript">
		function test() {
			var p = document.getElementById('preloader');
			var c = document.getElementById('content');

			p.style.display = 'none';
			c.style.display = 'block';
		}
	</script>
</head>
<body onload="test();">

	<div id="preloader">
		loading
	</div>

	<div id="content" style="display: none;">
		<img src="http://upload.wikimedia.org/wikipedia/commons/5/5f/Chicago_Downtown_Panorama.jpg" alt="" />
	</div>

</body>
</html>

sigma77 · January 13, 2011

Картинку пихать в другой контейнер, который прятать после загрузки документа.
А что такое #zzz и #xxx?

Просто случайные айдишники. Когда пишу мелкие скрипты и, поскольку не всегда получается их сразу написать, для быстрого теста использую подобные айдишники. Потом меняю на нормальные.

UPD: Вот, замутил примерчик:

Спасибо за пример, но видимо конкретно у меня вывод содержимого body в iframe происходит только после полной загрузки контента. Соответственно и скрипт срабатывает уже поздно

А искать, где это зарыто - ногу можно сломать.

Great Rash · January 14, 2011

Вычитал, что у <iframe> есть событие onload. Т.е. можно написать так <iframe onload="что_то">. Можно попробовать заюзать...

sigma77 · January 14, 2011

Вычитал, что у <iframe> есть событие onload. Т.е. можно написать так <iframe onload="что_то">. Можно попробовать заюзать...

В принципе я так и сделала, только картинка вне iframe вставляется. Вроде везде работает, но всё-равно какие-то сомнения...

Great Rash · January 14, 2011

Ну а внутрь почему не вставить? Получив ифрейм можно получить доступ к его document и body. Значит и его DOM можно менять...

sigma77 · January 14, 2011

Ну а внутрь почему не вставить? Получив ифрейм можно получить доступ к его document и body. Значит и его DOM можно менять...

Попробовала использовать такую конструкцию

onload="this.contentWindow.document.body.style.background = '#123456';"

В твоем примере, всё работает отлично.

У меня же на contentWindow в фаербаге пишет "Window undefined". Вроде пишут, что нельзя обратиться к содержимому iframe, если основной документ и содержимое iframe находятся на разных хостах...

Вообще, если смотреть мою ситуацию в фаербаге. То, если в момент появления рамки iframe (до прогрузки содержимого) нажать стоп. Я внутри iframe вижу <html>, <head> с подключенными скриптами и стилями и всё. <body> там нет. У тебя <body> отображается сразу. Так что думаю, там где-то косяк с подгрузкой...

Great Rash · January 14, 2011

А, так это все на разных доменах... тогда понятно... тогда вариант только один - оставлять как есть, т.е. вставлять картинку снаружи.

sigma77 · January 14, 2011

А, так это все на разных доменах... тогда понятно... тогда вариант только один - оставлять как есть, т.е. вставлять картинку снаружи.

Спасибо, так и сделаю

Sign In

Предзагрузочная картинка в iframe

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information