Question

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

Answer 1

src的{{1}}属性是否具有与其父页面匹配的域，协议和端口？

如果否，iframe是外部的，那么你无法改变的原因是因为Same Origin Policy。

如果是，那么您可以将iframe添加到iframe并使用此

<body>

所以你的代码将是

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

Answer 2

你不能; security restriction无法修改来自filehippo.com等不同域的iframe的内部结构（例如，考虑修改其他网站的登录页面有多危险））。

另一方面，请注意，即使iframe的内容来自同一个域，您的方法也无效。请参阅this question了解正确的方法。

Answer 3

纯Javascript将此覆盖颜色存档于正文

的Javascript

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

查看实时 W3Schools

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

3 个答案:

的Javascript