В 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> внутри которых есть якорь). |
Цитата:
И за тобой тестовый пример... |
На родительской странице просто:
<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> и т.д...) |
На данный момент решаю задачу так:
$('iframe#didacticfileContent').load(function()
{
$(this).contents().find('head').append('<style type="text/css"> .light {background: #efefef;} .checked {background: #9f9;}</style>');
// и дальше то же, что и в предыдущем сообщении...
Т.е. добавляю свои стили в разметку в iframe |
а страница основная и в фрейме с одного сайта?
|
Да, с одного.
Сейчас уже есть решение (в сообщении выше) Но теперь вопрос на сколько оно верное... |
Цитата:
Прочитай html() родительского style... Добавь style в ифрейм, а потом заполни его, прочитаным ранее, хтмэлем... |
| Часовой пояс GMT +3, время: 21:25. |