web-dev-qa-db-ja.com

iframeの問題の背景色を変更する

<iframe></iframe>の場合、表示されているページの背景色を白に変更する必要があります。それは可能ですか？元のWebサイトの背景は灰色になりました。

 <iframe allowtransparency="true" style="background-color: Snow;" src="http://zingaya.com/widget/9d043c064dc241068881f045f9d8c151" frameborder="0" height="184" width="100%">
    </iframe>

ロードされたページの背景を変更したい

htmlhtml5iframebackground-color
7
Paul T.

背景を変更できます。以下のような

<iframe allowtransparency="true" style="background: #FFFFFF;" src="http://zingaya.com/widget/9d043c064dc241068881f045f9d8c151" frameborder="0" height="184" width="100%">
    </iframe>

そして、あなたがiframeにロードしたもののページの背景を変更したい場合、それは不可能だと思います。

27
Kingk

JavaScriptが必要です。ページのロード時にiframeをロードする場合は、onloadイベントを使用してiframeのテストを挿入します。 iframeがリアルタイムで挿入される場合、挿入時にコールバック関数を作成し、実行する必要があるアクションをフックします:)

3
Angela

chetabahanaが書いたことに基づいて、JS機能に短い遅延を追加すると、作業中のサイトで役立つことがわかりました。これは、iframeが読み込まれた後に関数が作動することを意味していました。遅延をいじることができます。

var delayInMilliseconds = 500; // half a second

setTimeout(function() { 

   var iframe = document.getElementsByTagName('iframe')[0];
   iframe.style.background = 'white';
   iframe.contentWindow.document.body.style.backgroundColor = 'white';

}, delayInMilliseconds);

これがお役に立てば幸いです！

1
J Cox

あなたはjavascriptを使用してそれを行うことができます

  • Iframeの背景色を変更する
  • ロードされたページの背景色を変更する（同じドメイン）

プレーンjavascript

var iframe = document.getElementsByTagName('iframe')[0];
iframe.style.background = 'white';
iframe.contentWindow.document.body.style.backgroundColor = 'white';

jQuery

$('iframe').css('background', 'white');
$('iframe').contents().find('body').css('backgroundColor', 'white');
0
Chetabahana