如何控制iframe中主体元素的背景图像和颜色?注意，嵌入的body元素有一个类，iframe是属于我的站点的一个页面。
我需要这个的原因是，我的网站有一个黑色背景分配给主体，然后一个白色背景分配给包含文本的div。所见即所得编辑器在编辑时使用iframe来嵌入内容，但它不包括div，因此文本很难阅读。
iframe的主体在编辑器中有一个在其他任何地方都不使用的类，所以我假设这个放在那里是为了解决这样的问题。然而，当我将样式应用到类时。它们不会覆盖应用于Body的样式。奇怪的是，样式确实出现在Firebug中，所以我不知道发生了什么!
谢谢
更新-我已经尝试了@mikeq的解决方案，添加一个样式的类，是身体的类。这在添加到主页的样式表时不起作用，但在添加到Firebug时起作用。我假设这是因为Firebug应用于页面上的所有元素，而CSS没有应用于iframes中。这是否意味着添加css后窗口加载与JavaScript将工作?
当前回答
iframe有另一个作用域，所以你不能访问它的样式或用javascript改变它的内容。
基本上就是“另一页”。
你唯一能做的就是编辑它自己的CSS，因为你的全局CSS你什么都做不了。
其他回答
这段代码使用了普通JavaScript。它创建了一个新的<style>元素。它将该元素的文本内容设置为包含新CSS的字符串。它将该元素直接追加到iframe文档的头部。
但是请记住，访问从其他来源加载的文档的元素是不允许的(出于安全原因)——当从嵌入框架的页面的浏览上下文尝试时，iframe元素的contentDocument将计算为null。
var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
'body {' +
' background-color: some-color;' +
' background-image: some-image;' +
'}'
;
iframe.contentDocument.head.appendChild(style);
iframe有另一个作用域，所以你不能访问它的样式或用javascript改变它的内容。
基本上就是“另一页”。
你唯一能做的就是编辑它自己的CSS，因为你的全局CSS你什么都做不了。
如果你控制了承载iframe的页面和iframe的页面，你可以将一个查询参数传递给iframe…
下面是一个根据托管站点是否为移动站点向iframe添加类的示例…
添加内嵌框架:
var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile;
$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl );
iFrame内:
//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
$("body").addClass("mobile");
}
iframe是页面中的一个“洞”，它在里面显示另一个网页。iframe的内容不是任何形状，也不是父页面的一部分。
正如其他人所说，你的选择是:
为iframe中正在加载的文件提供必要的CSS 如果iframe中的文件与父文件来自同一个域，那么您可以从父文件访问iframe中的文档的DOM。
您不能更改iframe中显示的页面的样式，除非您可以直接访问并拥有源html和/或css文件。
这是为了停止XSS(跨站点脚本)
