Question

好的，情况就是这样。我有一个我订阅的网站，允许你添加自己的代码，等等。他们有一个论坛编辑器，我无法匹配我的网站，所以我只想改变内部最框架的颜色（以下示例中的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

Answer 1

假设你的iframe都在同一个域上，请给出一个镜头：

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

Answer 2

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

Answer 3

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

Answer 4

如果内框有名称，请尝试

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

我有内框bgcolor由

设置

＆LT; style type =“text / css”＆gt;

体{背景：#CCCCCC;}

＆LT; / style＆gt;

并且能够改变它。

访问框架内的框架

4 个答案: