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

我尝试将外部页面加载到iframe中并更改该页面的背景颜色
这是代码（它不起作用 – 它改变了父页面的颜色而不是iframe页面）：

 iframe { background-color: #F00; }      $(document).ready(function(){ $('body').css('background-color', '#F00'); });  

Answer 1

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

如果否，并且iframe是外部的，那么您无法更改它的原因是因为同源策略 。

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

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

所以你的代码将是

Answer 2

你不能; 这是一个安全限制，不能修改来自不同域的iframe的内部，例如filehippo.com （例如，考虑修改其他站点的登录页面有多危险）。

另一方面，请注意，即使iframe的内容来自同一个域，您的方法也不会起作用。 以正确的方式查看此问题 。

Answer 3

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

使用Javascript

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

查看现场W3Schools