Change background color of iframe issue

问题

I need to change background color to white of the displayed page if <iframe></iframe>. Is that possible? Now background of the original website is gray.

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

I want to change the background of loaded page

回答1:

I frame background can be changed. like below

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

and if you want to change the background of page what you have loaded in iframe then i think it not possible.

回答2:

JavaScript is what you need. If you are loading iframe when loading the page, insert the test for iframe using the onload event. If iframe is inserted in realtime, then create a callback function on insertion and hook in whatever action you need to take :)

回答3:

just building on what Chetabahana wrote, I found that adding a short delay to the JS function helped on a site I was working on. It meant that the function kicked in after the iframe loaded. You can play around with the delay.

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);

I hope this helps!

回答4:

You can do it using javascript

Change iframe background color
Change background color of the loaded page (same domain)

Plain 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');

回答5:

Put the Iframe between aside tags

<aside style="background-color:#FFF"> your IFRAME </aside>

来源：https://stackoverflow.com/questions/14830852/change-background-color-of-iframe-issue

标签

html

html5

iframe

background-color