Change background color of iframe issue

Question

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

Answer 1

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

Answer 2

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!