访问帧内的帧

发布于 2024-08-02 23:34:29 字数 1625 浏览 6 评论 0原文

好的，情况是这样的。我订阅了一个网站，可以让您添加自己的代码等。他们有一个论坛编辑器，我无法将其换肤以匹配我的网站，所以我只想更改最内框架的颜色（以下示例中的 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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞花火° 2024-08-09 23:34:29

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

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

回复收藏 0 原文

筑梦 2024-08-09 23:34:29

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

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

回复收藏 0 原文

难忘№最初的完美 2024-08-09 23:34:29

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

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>

回复收藏 0 原文

那一片橙海， 2024-08-09 23:34:29

如果内框有一个名称，请尝试

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

我将内框背景颜色设置为

<样式类型=“text/css”>

正文{背景：#cccccc;}

< /风格>

并能够改变它。

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.

回复收藏 0 原文

~没有更多了~

关于作者

温折酒

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

访问帧内的帧

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

访问帧内的帧

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。