Форум

spo · #1 (**permalink**) 09.03.2015, 20:34

На странице есть две ссылки с rel="a" и rel="b".
При клике на любую из них всплывает окно(fancybox iframe), внутри которого есть два абзаца p с классами class="a" и class="b" соотвественно.
Задача заключается в том чтобы при клике по ссылкам, устанавливать для одного из абзацев класс "show".

Возможно ли передать значение в iframe?

Код приведенный ниже конечно же не работает, если попытаться вывести значение rel из iframe.

var rel;

$('a.fancybox').fancybox({
	beforeLoad : function() {         
		if ($(this.element).attr('rel') == 'a') {
			rel = 'a';
		} else if ($(this.element).attr('rel') == 'b') {
			rel = 'b';
		}
	}
});

dd_smol · #2 (**permalink**) 09.03.2015, 22:45

<a rel="a" href="#">Первая ссылка</a>
<a rel="b" href="#">Вторая ссылка</a>

<iframe id="iframe" src="test.html">
	<!DOCTYPE html>
	<html>
	<head>
		<title>&nbsp;</title>
		<meta charset="utf-8" />
		<style>
			.show{color:red;}
		</style>
	</head>
	<body>
		<p class="a">Первый параграф</p>
		<p class="b">Второй параграф</p>
	</body>
	</html>
</iframe>

jQuery(function($) {
	$('a[rel]').each(function() {
		$(this).on('click', function() {
			$( $('#iframe')[0].contentWindow.document )
				.find('.' + $(this).attr('rel')).addClass('show');
			return false;
		});
	});
});

рони · #3 (**permalink**) 09.03.2015, 22:49

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

each

зачем?

dd_smol · #4 (**permalink**) 09.03.2015, 22:53

Привычка

spo · #5 (**permalink**) 09.03.2015, 23:00

dd_smol, ссылки имеют вид

<a rel="a" class="fancybox.iframe" href="test.html">a</a>

и никакого тега iframe на странице нет. Содержимое test.html и есть всплывающее окно.

dd_smol · #6 (**permalink**) 09.03.2015, 23:09

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

dd_smol, ссылки имеют вид

<a rel="a" class="fancybox.iframe" href="test.html">a</a>

и никакого тега iframe на странице нет. Содержимое test.html и есть всплывающее окно.

Возьмите объект документа всплывающего окна и замените им объект документа фрейма и получится тоже самое.

Извиняюсь возможно что-то не то говорю просто не работал с данным плагином и внутреннего устройства его не знаю.

рони · #7 (**permalink**) 09.03.2015, 23:38

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

test.html

эта страница ваша?

рони · #8 (**permalink**) 09.03.2015, 23:44

spo,
в afterLoad fancybox можно поставить код который вам показал dd_smol, вот тут понадобится each, чтобы обработать каждую ссылку индивидуально

spo · #9 (**permalink**) 09.03.2015, 23:56

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

...Возьмите объект документа всплывающего окна и замените им объект документа фрейма...

Логика понятна, но как именно это сделать я не знаю.

рони · #10 (**permalink**) 10.03.2015, 00:17

spo,
вариант предложенный dd_smol, работает -- смотреть тут

http://learn.javascript.ru/play/TDwbEb

Форум

Справочник

Discord чат

Курсы javascript