Форум

Onix13 · #1 (**permalink**) 16.02.2015, 16:07

Товарищи, добрый день. Очень мало изучаю java и jquerry, поэтому даже при решении простой (на мой взгляд) задачи испытал крайние затруднения. Очень надеюсь на вашу помощь!

Итак, дано:
Два блока div с каким-то содержимым, например

<div class="js-loader">
	111
</div>

<div class="js-loader">
	<iframe>222</iframe> // вставляется через сторонний script
</div>

(По сути первый блок без iframe создан для проверки работоспособности скрипта)

Задача: проверять содержимое div, и, если там есть iframe, то убирать дополнительный класс, если флэйма нет (aka грузится скрипт) - то добавляем доп. класс (который рисует картинку подгрузки на время, пока скрипт не подгрузится и не появится iframe).
Пока не берем тот момент, что возможно, скрипту нужно будет периодически проверять содержимое блока (чтобы на момент подгрузки скрипта повторить свой алгоритм)

Что смог сделать я:

<script type="text/javascript">
	$(document).ready(function()
	{
		if ($('.js-loader').children("iframe")) {
		   $('.js-loader').removeClass( "js-post-loader" ); // если iframe есть - убираем класс
		} else {
		   $('.js-loader').addClass( "js-post-loader" );  // если iframe нет - добавляем класс, который в бэкграунд пропишет значек загрузки
		}

	});		
</script>

В чем проблема: как мне объяснили, "if" работает с булевым значением, а у меня - массив данных, поэтому "if" всегда срабатывает как true. Скорее всего скрипт должен выглядеть как-то иначе. Я буду вам ОЧЕНЬ благодарен за подсказки.

Всем заранее огромное спасибо!

ksa · #2 (**permalink**) 16.02.2015, 16:17

Сообщение от Onix13

Что смог сделать я:

Как вариант...

<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.js-post-loader {
	border: 1px solid red;
}
</style>
<script type='text/javascript'>
$(function(){
	$('.js-loader').each(function(){
		if ($(this).find('iframe').length==0) {
			$(this).addClass('js-post-loader');
		} else {
			$(this).removeClass('js-post-loader');
		};
	});
});
</script>
</head>
<body> 
<div class="js-loader">
	111
</div>
<div class="js-loader">
	<iframe>222</iframe>
</div>
</body>
</html>

Onix13 · #3 (**permalink**) 16.02.2015, 16:46

Спасибо, заработало!

Стал искать, как заставить скрипт перезапускаться автоматически? Нашел вариант с return но не понял, как применять (гипер-новичек в jquerry, что сказать).

По логике:
если скрипт не нашел iframe то ему нужно вернуться, и повторять алгоритм до тех пор, пока не найдёт (пока фрэйм не подгрузится) . Можно поставить время перезапуска 1-3 секунды, если это имеет значение.

Спасибо!

laimas · #4 (**permalink**) 16.02.2015, 20:54

>вернуться, и повторять алгоритм до тех пор, пока не найдёт (пока фрэйм не подгрузится)

$(function(){}) - это все что будет исполняться после загрузки документа, следовательно iframe будет на странице.

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

ksa · #5 (**permalink**) 16.02.2015, 22:44

Сообщение от Onix13

как заставить скрипт перезапускаться автоматически?

Если я правильно понял, можно использовать метод setTimeout()...

Форум

Справочник

Discord чат

Курсы javascript