3

わかりました、これが状況です。独自のコードなどを追加できる購読しているサイトがあります。サイトに合わせてスキンを変更できないフォーラム エディターがあるため、最も内側のフレームの色を変更したいと思います (以下の例では doc3)。

これが基本的なセットアップです... はい、すべてのドキュメントは同じドメイン内にありますが、コードを追加できるのはメイン ドキュメントだけです。doc3 フレームは動的に作成されます。最初のフレームにはクラスがありますが名前はなく、2 番目のフレームには 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 にアクセスできません。

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または制御する方で、ドキュメントオブジェクトを親ウィンドウ変数に割り当てます。

メインドキュメント：

<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 に答える