iframeはロード時にカスタムCSSを上書きします。

iframeをロードしようとしていて、カスタムCSSスタイルを挿入するためにロードされた後です。しかし、私はページを読み込んでいるとき、私は自分のCSSスタイルが分割されて表示され、その後、最終的にそれが私のスタイルをオーバーライドし、それが消えるiframeがロードされて表示されます。iframeはロード時にカスタムCSSを上書きします。

iframeがロードされるまで待つ必要がありますが、私はそうしようとしましたが、成功することはありませんでした。

次のコードラインの実行後にデバッガを停止すると、バックグラウンドの変更が表示されます。しかしそれは消える。

.append('<style> body{background:red;}</style>');

コードスニペットを見てください。

(function(){ 
 
      var iFrame = $('iframe'); 
 
      var contents = iFrame.contents(); 
 
      var styleTag = contents.find('head').append('<style> body{background:red;}</style>'); 
 
     })();

#my-iframe { 
 
      width: 100%; 
 
      height: 600px; 
 
     } 
 
     
 
     #middle-container { 
 
      width: 500px; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
     } 
 
     
 
     #iframe-container { 
 
      width: 100%; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>iFrame Test Page</title> 
 
</head> 
 

 
<body> 
 
    <div id="middle-container"> 
 
     <div id="iframe-container"> 
 
      <iframe id="my-iframe"  src="http://www.w3schools.com"> 
 
       <p>Sorry! Your browser doesn't support iFrames</p> 
 
      </iframe> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-06-22 altgov3en

を！ CSSスタイルで重要ですか？ –

あなたのコードは実際には、正しいです。ただし、外部リソースの内容を変更しようとしているため、コンテンツは変更されずに変更されません。ブラウザのクロスサイトスクリプティング（セキュリティ）ルールにより、これを達成できなくなります。

iframeの内容を編集する唯一の方法は、iframeの内容全体を置き換えることです。

例：

$('iframe').load(function() { 
    $('iframe').replaceWith('<p>Replacing everything!</p>'); 
});

しかし、それはかなり無意味と思われます。

このような色に変更するjQueryのを使用しないのはなぜ

出典

2016-06-22 14:42:24

：あなたが与えてみました

https://jsfiddle.net/9vzj7qt8/

(function(){ 
      var iFrame = $('iframe'); 
      var contents = iFrame.contents(); 
      var styleTag = contents.find('body').css("background-color","red"); 
     })();

出典

2016-06-22 14:56:30

iframeはロード時にカスタムCSSを上書きします。

答えて

関連する問題