访问帧内的帧
好的，情况是这样的。我订阅了一个网站，可以让您添加自己的代码等。他们有一个论坛编辑器，我无法将其换肤以匹配我的网站，所以我只想更改最内框架的颜色（以下示例中的 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
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
假设您的 iframe 都在同一个域上，请尝试一下：
我没有将其全部链接在一起纯粹是为了可读性，对于 IE，我必须将其更改为
$(window).load(function() {< /代码>Assuming your iframes are all on the same domain give this a shot:
I didn't chain it ALL together purely for readability purposes and for IE I had to change it to
$(window).load(function() {使用 iframe 元素访问文档对象可能会遇到很大问题。在大多数情况下，浏览器允许嵌入文档访问父窗口的上下文，但反之则不然。因此，在 doc2.htm 或您想要控制的任何一个中，将文档对象分配给父窗口变量。
主要文档：
doc3.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:
doc3.html:
如果内框有一个名称，请尝试
我将内框背景颜色设置为
<样式类型=“text/css”>
< /风格>
并能够改变它。
If the innerframe has a name try
I had the innerframe bgcolor set by
< style type="text/css">
< /style >
and was able to change it.