Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.03.2015, 20:34
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Fancybox - передать значение в iframe
На странице есть две ссылки с 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';
		}
	}
});
Ответить с цитированием
  #2 (permalink)  
Старый 09.03.2015, 22:45
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

<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;
		});
	});
});

Последний раз редактировалось dd_smol, 09.03.2015 в 22:47.
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2015, 22:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от dd_smol
each
зачем?
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2015, 22:53
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

Привычка
Ответить с цитированием
  #5 (permalink)  
Старый 09.03.2015, 23:00
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

dd_smol, ссылки имеют вид
<a rel="a" class="fancybox.iframe" href="test.html">a</a>
и никакого тега iframe на странице нет. Содержимое test.html и есть всплывающее окно.
Ответить с цитированием
  #6 (permalink)  
Старый 09.03.2015, 23:09
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

Сообщение от spo Посмотреть сообщение
dd_smol, ссылки имеют вид
<a rel="a" class="fancybox.iframe" href="test.html">a</a>
и никакого тега iframe на странице нет. Содержимое test.html и есть всплывающее окно.
Возьмите объект документа всплывающего окна и замените им объект документа фрейма и получится тоже самое.

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

Последний раз редактировалось dd_smol, 09.03.2015 в 23:11.
Ответить с цитированием
  #7 (permalink)  
Старый 09.03.2015, 23:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от spo
test.html
эта страница ваша?
Ответить с цитированием
  #8 (permalink)  
Старый 09.03.2015, 23:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

spo,
в afterLoad fancybox можно поставить код который вам показал dd_smol, вот тут понадобится each, чтобы обработать каждую ссылку индивидуально
Ответить с цитированием
  #9 (permalink)  
Старый 09.03.2015, 23:56
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Сообщение от dd_smol Посмотреть сообщение
...Возьмите объект документа всплывающего окна и замените им объект документа фрейма...
Логика понятна, но как именно это сделать я не знаю.
Ответить с цитированием
  #10 (permalink)  
Старый 10.03.2015, 00:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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

http://learn.javascript.ru/play/TDwbEb
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
FancyBox и Iframe FLion jQuery 4 22.12.2016 02:05
как передать значение переменной в IFRAME в поле формы JS-ом из самой страницы? DeUre Общие вопросы Javascript 14 17.12.2013 16:37
Выводить значение раньше переменных Гробовщик Общие вопросы Javascript 11 10.09.2013 08:42
Как получить значение атрибута тега iframe? Dimaz Общие вопросы Javascript 5 15.12.2012 15:40
Передать значение из FancyBox IfFrame в родительское окно. mnk Events/DOM/Window 2 03.04.2012 14:16