Accessing a frame within a frame

Ok, here is the situation. I have a site that I subscribe to that lets you add your own code, etc. They have a forum editor that I am unable to skin to match my site, so I'd like to just change the colors of the inner most frame (doc3 in the example below).

Here is the basic setup... yes, all documents are from within the same domain but I can only add code to the main document. The doc3 frame is created dynamically. The first frame has a class but no name, the second only has an id... I don't know if the bind works for the inner frame, but firebug isn't giving me any errors.

Oh, and I have tried injecting a stylesheet as well without success.

Main document (with my attempts at accessing 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>

I hope I made this clear enough. Any help or a point in the right direction would be greatly appreciated :)

Edit: updated the Main document with the suggestion from Wahnfrieden (thanks!), but sadly I still can't get to doc3.htm

Assuming your iframes are all on the same domain give this a shot:

$(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
   })
})

I didn't chain it ALL together purely for readability purposes and for IE I had to change it to $(window).load(function() {

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

Accessing to the document object using the iframe element can be pretty problematic. In most cases browsers let the embedded document to access the parent window's context but not vice versa. So in doc2.htm or whichever you want to control, assign your document object to parent windows variable.

main document:

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

If the innerframe has a name try

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

I had the innerframe bgcolor set by

< style type="text/css">

body{background:#cccccc;}

< /style >

and was able to change it.

来源：https://stackoverflow.com/questions/1324764/accessing-a-frame-within-a-frame

标签

javascript

jquery

css

frames