フレーム内のフレームにアクセスする

StackOverflow https://stackoverflow.com/questions/1324764

  •  19-09-2019
  •  | 
  •  

質問

さて、これが状況です。独自のコードなどを追加できるサイトを購読しています。彼らのフォーラム エディターでは、私のサイトに合わせてスキンを適用することができないため、最も内側のフレーム (以下の例では 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 にアクセスできません

役に立ちましたか？

解決

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

他のヒント

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

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>

内部フレームに名前がある場合は試してください 

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

インナーフレームのbgcolorを設定しました

< style type="text/css">

本文{背景:#cccccc;}

< /スタイル >

そしてそれを変えることができました。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top