如何更改加载到iframe中的外部页面的背景颜色 [英] how to change background-color of external page loaded into iframe
本文介绍了如何更改加载到iframe中的外部页面的背景颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试将外部页面加载到iframe并更改该页面的背景颜色
这里是代码（它不起作用 - 它更改父页面的颜色而不是iframe页面）：
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>
推荐答案
是否
srciframe的属性是否具有与其父页面匹配的域，协议和端口？
Does the
srcattribute of theiframehave matching domain, protocol and port to its parent page?
如果没有且 iframe 是外部的，那么
的原因你无法改变它是因为同源政策。
If no and the iframe is external, then
reason you can not change it is because of Same Origin Policy.
如果是，那么您可以将< body> 添加到iframe并使用此
If yes, then you can add <body> to the iframe and use this
$(document).ready(function(){
$('iframe').contents().find('body').css('backgroundColor', 'Your Color');
});
所以你的代码将是
<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>
这篇关于如何更改加载到iframe中的外部页面的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
