Доступ к кадру внутри кадра - PullRequest
Новая
       11

Доступ к кадру внутри кадра

2 голосов
/ 25 августа 2009

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

Вот базовая настройка ... да, все документы находятся в одном домене, но я могу только добавить код в основной документ. Кадр doc3 создается динамически. У первого фрейма есть класс, но нет имени, у второго - только идентификатор ... Я не знаю, работает ли связывание для внутреннего фрейма, но 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>

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

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

Ответы [ 4 ]

2 голосов
/ 25 августа 2009

Предположим, что все ваши фреймы находятся в одном домене: 

$(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 голос
/ 25 августа 2009 
$('#iframeID').contents().find('#someID').html();
0 голосов
/ 07 февраля 2013

Если у внутреннего кадра есть имя, попробуйте 

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

У меня был внутренний кадр bgcolor, установленный

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

0 голосов
/ 25 августа 2009

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

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

<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>
...