how to change background-color of external page loaded into iframe
css, iframe, jquery
Solution
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>
Problem
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> ```