iFrameのDIVのCSSを親から変更してください

私の仕事でWeb開発のスキルをさらに進め始めて少し問題がありました。iFrameのDIVのCSSを親から変更してください

私はiFrame（iframe.html）を持っています。このiframeには、緑色の四角形のスタイルのdivがあります。 onClick関数を使用して、親（index.html）のボタンを使用してDivの色をiframe外に変更したいとします。

通常のFunction（document.getElementByIdなど）を呼び出すのと同じように、私はいくつか試しました。しかし、実際には何も働かなかった。 jqueryにはいくつかの解決策があるかもしれないと私は考えていましたが、私は今このコードに固執していますが、動作しません。

誰でも手助けできますか？

PS：これはクロスオリジンではありません。私は同じディレクトリに両方のhtmlファイルを持っています。

<!DOCTYPE html> 

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/index.css"> 
     <script src="jquery-1.12.2.min.js"></script> 

     <title>buttonframetest</title> 
     <script type="text/javascript"> 
      function Clickit() { 
       $(document).ready(function(){ 
      $('iframe').contents().find('background-color').css('backgroundColor', 'white'); 
      }); 
      } 

     </script> 

    </head> 
    <body> 
     <iframe id="iframe" src="iframe.html" width="500px;" height="500px"> 
     <p>iFrame nicht darstellbar in deinem Browser</p> 
     </iframe> 
     <br> 
     <button type='button' onClick="Clickit();">Klick</button> 
     <button type="button" onclick="redy">CHANGE</button> 
     <br> 
     <div class="ChangeColor"></div> 


     <script type="text/javascript" src="cordova.js"></script> 
     <script type="text/javascript" src="js/index.js"></script> 
    </body> 
</html>

出典

2016-05-27 adamswebspace

残りのコードをここまたはフィドルに追加します。 – frnt

@frntがちょうど私の投稿を編集しました – adamswebspace

があなたのjQueryを更新し、これを追加CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
function clck(){ 
     $(document).ready(function(){ 
     $('iframe').css({ 
     'background' : '#fff' 
     }); 
     }); 
}

出典

2016-05-27 13:15:53 frnt

これは、DOMのiframeオブジェクトのcontentDocumentプロパティで行うことができます。

document.frames[0].contentDocument.getElementById('id here').style['background-color']=whatever;

あるいは、window.postMessageで：

// this is in parent 
document.frames[0].postMessage('red', '*'); 

// this is in frame 
window.onmessage = function(x) { 
    if (x.origin == 'http://www.example.com') document.getElementById('id here').style['background-color'] = x.data; 
}

出典

2016-05-27 12:53:16

iFrameのDIVのCSSを親から変更してください

答えて

関連する問題