Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2011, 18:08
Интересующийся
Отправить личное сообщение для Nikoole Посмотреть профиль Найти все сообщения от Nikoole
 
Регистрация: 04.07.2011
Сообщений: 20

В iframe применить стиль родительского окна
Добрый вечер.
Стоит задача в iframe подгрузить нужный документ (это сделано) и при наведении мышки в этом iframe на тег <p> менять цвет его background'а.

Меняю цвет фона тега <p> при помощи addClass('имя класса'), но т.к. это iframe, то в нем этот класс не определен. Как применить к iframe класс родительского окна? Возможно ли это вообще?
Вот такой код есть:
$('iframe#didacticfileContent').load(function()
	{
		$(this).contents().find('p').mouseover(function () {
			if(typeof($(this).find('a').attr('name')) != 'undefined')
			{
				$(this).find('a').parents('p').addClass('light'); 
				$(this).find('a').parents('p').css('cursor', 'pointer');
			}
		});
	});


(он подсвечивает теги <p> внутри которых есть якорь).
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2011, 19:18
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Nikoole
Возможно ли это вообще?
А как стили подключены на родительской странице?

И за тобой тестовый пример...
Ответить с цитированием
  #3 (permalink)  
Старый 06.10.2011, 19:46
Интересующийся
Отправить личное сообщение для Nikoole Посмотреть профиль Найти все сообщения от Nikoole
 
Регистрация: 04.07.2011
Сообщений: 20

На родительской странице просто:
<style type="text/css">
.light {
	background: #efefef;
}
.checked {
	background: #9f9;
}</style>

Вот вся функция, которая вызывается при изменении src iframe:
function lightAnchors()
{
	$('iframe#didacticfileContent').load(function()
	{
		$(this).contents().find('p').mouseover(function () {
			if(typeof($(this).find('a').attr('name')) != 'undefined')
			{
				$(this).find('a').parents('p').addClass('light'); //css('background', '#eee');
				$(this).find('a').parents('p').css('cursor', 'pointer');
			}
		});
		$(this).contents().find('p').mouseout(function ()
		{
			if(typeof($(this).find('a').attr('name')) != 'undefined')
			{
				$(this).find('a').parents('p').removeClass('light');
			}
  		});
		$(this).findcontents().('p').click(function () 
		{
			if(typeof($(this).find('a').attr('name')) != 'undefined')
			{
				$(this).find('a').parents('p').toggleClass('checked');
			}
    		});
	});

}

(по коду: меняю цвет тега только в том случае, если внутри него есть тег a с установленным name)
Она работает, но в iframe не видны стили родительской страницы. Т.е. они применяются, но на внешний вид элементов не влияют, т.к. в iframe они не определены. (Не знаю важно это или нет, но iframe - это вполне себе веб-страница с <body> <html> и т.д...)

Последний раз редактировалось Nikoole, 06.10.2011 в 19:58.
Ответить с цитированием
  #4 (permalink)  
Старый 06.10.2011, 20:07
Интересующийся
Отправить личное сообщение для Nikoole Посмотреть профиль Найти все сообщения от Nikoole
 
Регистрация: 04.07.2011
Сообщений: 20

На данный момент решаю задачу так:
$('iframe#didacticfileContent').load(function()
	{
		$(this).contents().find('head').append('<style type="text/css"> .light {background: #efefef;} .checked {background: #9f9;}</style>');
// и дальше то же, что и в предыдущем сообщении...


Т.е. добавляю свои стили в разметку в iframe
Ответить с цитированием
  #5 (permalink)  
Старый 06.10.2011, 20:39
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

а страница основная и в фрейме с одного сайта?
Ответить с цитированием
  #6 (permalink)  
Старый 06.10.2011, 20:44
Интересующийся
Отправить личное сообщение для Nikoole Посмотреть профиль Найти все сообщения от Nikoole
 
Регистрация: 04.07.2011
Сообщений: 20

Да, с одного.
Сейчас уже есть решение (в сообщении выше) Но теперь вопрос на сколько оно верное...
Ответить с цитированием
  #7 (permalink)  
Старый 06.10.2011, 21:50
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Nikoole Посмотреть сообщение
На данный момент решаю задачу так:
$('iframe#didacticfileContent').load(function()
	{
		$(this).contents().find('head').append('<style type="text/css"> .light {background: #efefef;} .checked {background: #9f9;}</style>');
// и дальше то же, что и в предыдущем сообщении...


Т.е. добавляю свои стили в разметку в iframe
Так ты в шаге от решения!
Прочитай html() родительского style... Добавь style в ифрейм, а потом заполни его, прочитаным ранее, хтмэлем...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нажать ссылку в iframe из родительского окна max124rus jQuery 1 12.03.2011 13:47
Ответ из дочернего окна с отличны доменом от родительского aydar Events/DOM/Window 2 24.11.2010 18:01
Обращение к функциям родительского окна realus Events/DOM/Window 3 14.08.2010 20:41
Выделить слово и применить стиль JsLoveR Серверные языки и технологии 5 23.05.2010 20:58
Закрытие родительского окна без диалога Гость Общие вопросы Javascript 1 28.10.2008 00:01