3

I try to load external page into iframe and change background-color of that page
here is the code (it is not working - it change color of parent page not iframe page):

<style type="text/css">
iframe {
    background-color: #F00;
}
</style>

<iframe src="http://www.filehippo.com/" height="100%" width="100%">
</iframe>


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('body').css('background-color', '#F00');
});
</script>
user1942505
  • 480
  • 5
  • 11
  • 20
  • possible duplicate of [Using CSS to affect div style inside iframe](http://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe) – Explosion Pills Feb 16 '13 at 18:31

3 Answers3

6

Does the src attribute of the iframe have matching domain, protocol and port to its parent page?

If no and the iframe is external, then reason you can not change it is because of Same Origin Policy.

If yes, then you can add <body> to the iframe and use this

$(document).ready(function(){
    $('iframe').contents().find('body').css('backgroundColor', 'Your Color');
});

So your code will be

<html>
<body>
<style type="text/css">
iframe {
    background-color: #F00;
}
</style>
<iframe src="http://www.filehippo.com/" height="100%" width="100%"></iframe>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('iframe').contents().find('body').css('backgroundColor', 'white');
});
</script>
</body>
</html>
Bhushan Firake
  • 9,338
  • 5
  • 44
  • 79
  • @user1942505 See my update and paste that code and open it in browser..it works. But if you are trying to change the background color of original website, then its impossible.. – Bhushan Firake Feb 16 '13 at 18:45
  • background-color is: rgb(222, 223, 224); it is not chenging to white it remain the same - rgb(222, 223, 224); – user1942505 Feb 16 '13 at 19:06
  • 1
    Read my answer, you cannot change the background color of filehippo website. You can only change color of your iframe – Bhushan Firake Feb 16 '13 at 19:10
3

You can't; it's a security restriction not to be able to modify the internals of iframes coming from different domains such as filehippo.com (think about how dangerous modifying other sites' login pages, for instance, can be).

On the other hand, note that your method wouldn't work even if the iframe's contents were coming from the same domain. See this question for the right way to do it.

Community
  • 1
  • 1
Chris
  • 26,544
  • 5
  • 58
  • 71
0

Pure Javascript to archive this override color on body

Javascript

var x = document.getElementById("myframe");
var y = x.contentWindow.document;
y.body.style.backgroundColor = "red";

View live W3Schools

Jaykumar Patel
  • 26,836
  • 12
  • 74
  • 76