如何更改加载到iframe中的外部页面的背景颜色

Question

如何更改加载到iframe中的外部页面的背景颜色

3

我试图将外部页面加载到 iframe 中，并更改该页面的背景颜色。以下是代码（它不能正常工作 - 它会更改父级页面而不是 iframe 页面的颜色）：

<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

可能是重复的问题：如何使用CSS影响iframe内部div样式。 - Explosion Pills

3个回答

3

你不能这样做；这是一种安全限制，不能修改来自不同域名的iframe的内部内容，例如filehippo.com（想象一下修改其他网站的登录页面会有多危险）。

另一方面，即使iframe的内容来自相同的域，你的方法也行不通。请参见这个问题，了解正确的操作方式。

- Chris

0

使用纯Javascript来覆盖body的颜色

Javascript

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

查看实时 W3Schools

- Jaykumar Patel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bhushan Firake · Accepted Answer

iframe标签的src属性和其父页面是否匹配域名、协议和端口？

如果不匹配并且iframe是外部的，则无法更改原因是因为同源策略。

如果匹配，则可以向iframe添加<body>，并使用以下代码：

$(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>