2009-08-24 3 views
2

Хорошо, вот что такое. У меня есть сайт, на который я подписался, чтобы вы могли добавить свой собственный код и т. Д. У них есть редактор форумов, который я не могу использовать для моего сайта, поэтому я хотел бы просто изменить цвета самого внутреннего кадра (doc3 в примере ниже).Доступ к рамке в кадре

Вот основные настройки ... да, все документы из одного домена, но я могу только добавить код в основной документ. Кадр doc3 создается динамически. Первый кадр имеет класс, но не имя, второй - только id ... Я не знаю, работает ли привязка для внутреннего фрейма, но firebug не дает мне никаких ошибок.

О, и я пробовал впрыскивать таблицу стилей также без успеха.

Главный документ (с моими попытками обращающегося doc3)

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('iframe').bind('load', function(){ 
    $(this).contents().find('body').css({'background-color':'#333333','color':'#ddd'}); // This does change doc2 colors 
    $(this).contents().find('iframe#doc3').bind('load', function(){ 
    $(this).contents().find('body').css({'background-color':'#333333','color':'#ddd'}); // doesn't work :(
    }) 
}) 
}) 
</script> 
</head> 
<body> 
Document #1 
<iframe class="postFrame" src="doc2.htm" width="100%" height="300"> 
</body> 
</html> 

doc2.htm

<html> 
<head> 
</head> 
<body> 
<form id="form1"> 
Document #2 
<iframe id="doc3" src="doc3.htm" width="100%" height="250"> 
</form> 
</body> 
</html> 

doc3.htm

<html> 
<head> 
</head> 
<body style="background-color:#fff; color:#000;"> <!-- access this body style --> 
Document #3 
</body> 
</html> 

Надеюсь, я сделал это достаточно ясно. Любая помощь или точка в правильном направлении была бы весьма признателен :)

редактирования: обновленная Главный документ с предложением от Wahnfrieden (спасибо!), Но, к сожалению, я до сих пор не могу добраться до doc3.htm

ответ

2

Предполагая, что ваши Iframes все на том же домене, дать этому выстрел:

$(function() { 
    $(window).load(function() { 
    var iframe2body = $('iframe').contents().find('body'); 
    iframe2body.css({ 'background-color': '#333333', 'color': '#ddd' }); // doc2 colors 
    iframe2body.contents('iframe').contents().find('body').css({ 'background-color': '#fff', 'color': '#ddd' }); // doc3 colors 
    }) 
}) 

я не сделал цепи это ВСЕ вместе чисто для читаемости целей, и для IE мне пришлось изменить его на $(window).load(function() {

+1

Спасибо, Колин! Это сработало, но мне пришлось изменить строку doc3 «.contents (« iframe »)« на ».find ('iframe')" ... iframe2body.find ('iframe'). Contents(). Find ('body'). css ({'background-color': '# 555', 'color': '# ddd'}); // doc3 colors – Mottie

+0

К сожалению, я только что обнаружил, что doc3.htm загружает файл CSS, который имеет «! important» после фона и цвета color = (... Думаю, мне придется загрузить таблицу стилей – Mottie

1
$('#iframeID').contents().find('#someID').html(); 
+0

Извините, я должен был быть более ясным, я хочу добраться до тела doc3.htm и добавить цвет фона и текста – Mottie

+0

Эй, извините, я не имел в виду, что это полное решение, просто указатель - он выглядит как часть .contents() - это то, что вам не хватало. – aehlke

+0

Я обновил основной документ с кодом, который может получить доступ к doc2.htm, но я до сих пор не могу добраться до doc3.htm. +1 за помощь до сих пор :) – Mottie

0

Доступ к объекту документа с использованием элемента iframe может быть довольно проблематичным. В большинстве случаев браузеры позволяют встроенному документу обращаться к контексту родительского окна, но не наоборот. Поэтому в doc2.htm или в зависимости от того, что вы хотите контролировать, назначьте свой объект документа родительской переменной окна.

Основной документ:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    window.onIframeReady = function() { 
     setChildColor("#bbb"); 
    } 
</script> 
</head> 
<body> 
Document #1 
<iframe class="postFrame" src="doc2.htm" width="100%" height="300"> 
</body> 
</html> 

doc3.html:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
    parent.parent.setChildColor = function (color) { 
     document.bgColor(color); 
    } 
    $(function() { 
     parent.parent.onIframeReady(); 
    }) 
</script> 
</head> 
<body style="background-color:#fff; color:#000;"> <!-- access this body style --> 
Document #3 
</body> 
</html> 
+0

Привет и спасибо за ответ ... проблема в том, что у меня нет контроля над содержимым doc2.htm или doc3.htm. Наверное, я мог бы ввести код. – Mottie

0

Если innerframe имеет имя попробовать

innerframeName.document.body.style.backgroundColor="#000000"; 

Я имел innerframe BGCOLOR установленный

< типа стиль = "текст/CSS">

тело {фон: # cccccc;}

</style

и смог изменить его.

Смежные вопросы