How to alter the background of an iFrame?

Question

I'm struggling to modify the background-color of an iframe.
This iframe aims to load an external page (external domain).
Indeed, I tested the basic way to apply style="background-color:#fff" upon it, but it isn't applied:

<IFRAME allowtransparency="true" style="background-color: #FFF" src="http://pagetoload.htm" width="250" height="420" scrolling="no" frameborder="1"></IFRAME>

Is there a good way to achieve it?

Alexander Nicholas Popa · Answer 1 · 2014-09-16T13:38:29.777

0

<script type="text/javascript">
$(document).ready(function(){
    $('iframe').contents().find('body').css('backgroundColor', 'white');
});
</script>

this solution makes use of jquery. Don't forget to add jquery library. You can do it with this.

edited Sep 16 '14 at 13:38

answered Sep 16 '14 at 13:30

Alexander Nicholas Popa

272
1
18

Thanks for the advice, i'll test it, and i'll let you know – gamliel Sep 16 '14 at 13:33
please thumb up if works! – Alexander Nicholas Popa Sep 16 '14 at 13:33
2

You should mention that your solution makes use of jQuery, even if it seems obvious for some people. – Mik378 Sep 16 '14 at 13:36
@AlexanderNicholasPopa Here's my work, and it seems that your solution doesn't work... [MyExamplePage](http://plnkr.co/edit/BXrXIKx31sK5CyXYGNWZ?p=preview) – gamliel Sep 16 '14 at 14:06
have you added the jquery libary? your example page is also blank for me – Sam Denton Sep 16 '14 at 14:12
add this in your head section. – Alexander Nicholas Popa Sep 16 '14 at 14:13
@SamDenton the black page you see, is my loaded page.I've deleted all my index.html content to make the code more readable... – gamliel Sep 16 '14 at 14:29
@AlexanderNicholasPopa same thing....it doesnt work – gamliel Sep 16 '14 at 14:30
@gamliel I guess he said 'blank', not 'black' :) – Mik378 Sep 16 '14 at 14:38

How to alter the background of an iFrame?

1 Answers1