1

我尝试将外部页面加载到 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>
4

3 回答 3

5

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

如果不是并且iframe是外部的，那么您无法更改它的原因是由于Same Origin Policy。

如果是，那么您可以添加<body>到 iframe 并使用它

$(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>
于 2013-02-16T18:31:47.310 回答
3

你不能；不能修改来自不同域（例如filehippo.com ）的 s 的内部结构是一种安全限制（例如，想想修改其他站点的登录页面是多么危险）。iframe

另一方面，请注意，即使iframe' 的内容来自同一个域，您的方法也不起作用。请参阅此问题以了解正确的方法。

于 2013-02-16T18:31:32.050 回答
0

纯 Javascript 在正文上存档此覆盖颜色

Javascript

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

现场观看W3Schools

于 2014-09-16T13:41:05.393 回答