3

好的，情况就是这样。我有一个我订阅的网站，可以让您添加自己的代码等。他们有一个论坛编辑器，我无法为我的网站设置皮肤，所以我只想更改最内层框架的颜色（ doc3 在下面的示例中）。

这是基本设置...是的，所有文档都来自同一个域，但我只能将代码添加到主文档。doc3 框架是动态创建的。第一个框架有一个类但没有名称，第二个框架只有一个 id ...我不知道绑定是否适用于内部框架，但萤火虫没有给我任何错误。

哦，我也尝试过注入样式表，但没有成功。

主文档（我尝试访问 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

4

4 回答 4

2

假设您的 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() {

于 2009-08-25T03:05:37.687 回答
1 
$('#iframeID').contents().find('#someID').html();
于 2009-08-24T21:12:09.497 回答
0

使用 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>
于 2009-08-25T00:14:07.077 回答
0

如果内框有名称，请尝试

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

我设置了内框 bgcolor

<style type="text/css">

正文{背景：#cccccc;}

</风格>

并且能够改变它。

于 2013-02-07T01:17:53.510 回答