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
This question is related to
html
iframe
background-color
An <iframe>
background can be changed like this:
<iframe allowtransparency="true" style="background: #FFFFFF;"
src="http://zingaya.com/widget/9d043c064dc241068881f045f9d8c151"
frameborder="0" height="184" width="100%">
</iframe>
I don't think it's possible to change the background of the page that you have loaded in the iframe.
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 :)
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!
Put the Iframe between aside tags
<aside style="background-color:#FFF">
your IFRAME
</aside>
You can do it using javascript
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');
It is possible. With vanilla Javascript, you can use the function below for reference.
function updateIframeBackground(iframeId) {
var x = document.getElementById(iframeId);
var y = (x.contentWindow || x.contentDocument);
if (y.document) y = y.document;
y.body.style.backgroundColor = "#2D2D2D";
}
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_contentdocument
Source: Stackoverflow.com