访问框架内的框架答案

【问题标题】：Accessing a frame within a frame访问框架内的框架
【发布时间】：2009-08-24 21:02:06
【问题描述】：

好的，情况就是这样。我有一个我订阅的网站，可以让您添加自己的代码等。他们有一个论坛编辑器，我无法为我的网站设置皮肤，所以我只想更改最内层框架的颜色（ 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

【问题讨论】：

标签： javascript jquery css frames

【解决方案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() {

【讨论】：

谢谢科林！那行得通，但是我不得不将 doc3 行“.contents('iframe')”更改为“.find('iframe')”... iframe2body.find('iframe').contents().find('body ').css({ '背景色':'#555','color':'#ddd' }); // doc3 颜色
可悲的是，我刚刚发现 doc3.htm 加载了一个 CSS 文件，该文件在背景颜色和文本颜色之后有一个“！important”=(...我想我将不得不加载一个样式表

【解决方案2】：

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

【讨论】：

对不起，我应该更清楚，我想进入 doc3.htm 正文并添加背景和文本颜色
嘿抱歉，我并不是说它是一个完整的解决方案，只是一个指针 - 看起来 .contents() 部分是你所缺少的。
我用可以访问 doc2.htm 的代码更新了主文档，但我仍然无法访问 doc3.htm。到目前为止的帮助 +1 :)

【解决方案3】：

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

【讨论】：

您好，感谢您的回复...问题是我无法控制 doc2.htm 或 doc3.htm 的内容。我想我可以注入一些代码。

【解决方案4】：

如果内框有名字试试

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

我有由

设置的内框bgcolor

正文{背景：#cccccc;}

样式>

并且能够改变它。

【讨论】：