如何控制iframe中主体元素的背景图像和颜色?注意，嵌入的body元素有一个类，iframe是属于我的站点的一个页面。
我需要这个的原因是，我的网站有一个黑色背景分配给主体，然后一个白色背景分配给包含文本的div。所见即所得编辑器在编辑时使用iframe来嵌入内容，但它不包括div，因此文本很难阅读。
iframe的主体在编辑器中有一个在其他任何地方都不使用的类，所以我假设这个放在那里是为了解决这样的问题。然而，当我将样式应用到类时。它们不会覆盖应用于Body的样式。奇怪的是，样式确实出现在Firebug中，所以我不知道发生了什么!
谢谢
更新-我已经尝试了@mikeq的解决方案，添加一个样式的类，是身体的类。这在添加到主页的样式表时不起作用，但在添加到Firebug时起作用。我假设这是因为Firebug应用于页面上的所有元素，而CSS没有应用于iframes中。这是否意味着添加css后窗口加载与JavaScript将工作?
当前回答
您不能更改iframe中显示的页面的样式，除非您可以直接访问并拥有源html和/或css文件。
这是为了停止XSS(跨站点脚本)
其他回答
iframe是页面中的一个“洞”，它在里面显示另一个网页。iframe的内容不是任何形状，也不是父页面的一部分。
正如其他人所说，你的选择是:
为iframe中正在加载的文件提供必要的CSS 如果iframe中的文件与父文件来自同一个域，那么您可以从父文件访问iframe中的文档的DOM。
给你的iframe页面的主体一个ID(或者类，如果你愿意)
<html>
<head></head>
<body id="myId">
</body>
</html>
然后，同样在iframe的页面中，在CSS中为它分配一个背景
#myId {
background-color: white;
}
对于一个iframe，你可以这样做:
document.querySelector('iframe').contentDocument.body.style.backgroundColor = '#1e1e2d';
如果你有多个iframe，你正在处理:
document.querySelectorAll('iframe').forEach((iframe) => {
iframe.contentDocument.body.style.backgroundColor = '#1e1e2d';
});
只有当iframe内容来自相同的父域时，下面的内容才有效。
下面的代码适用于我。在Chrome和IE8上测试。内部iframe引用与父页在同一域中的页面。
在这个特殊的例子中，我在内部iframe中隐藏了一个具有特定类的元素。
基本上，你只需要将一个样式元素附加到加载在框架中的文档的头部部分:
frame.addEventListener("load", ev => {
const new_style_element = document.createElement("style");
new_style_element.textContent = ".my-class { display: none; }"
ev.target.contentDocument.head.appendChild(new_style_element);
});
您也可以使用link元素来代替样式，以引用样式表资源。
您不能更改iframe中显示的页面的样式，除非您可以直接访问并拥有源html和/或css文件。
这是为了停止XSS(跨站点脚本)
