CSS覆盖iframe中内容的正文风格？
我如何控制iframe中的body元素的背景图像和颜色？ 请注意，embedded的body元素有一个类，而iframe是属于我的网站的页面。
我需要这个的原因是我的网站有一个黑色背景分配给正文，然后分配给包含文本的div的白色背景。 所见即所得编辑器在编辑时使用iframeembedded内容，但不包含div，因此文本很难阅读。
在编辑器中的iframe的主体有一个没有在其他地方使用的类，所以我假设这是放在那里，所以这样的问题可以解决。 但是，当我将样式应用于class.body时，它们不会覆盖应用于body的样式。 奇怪的是，风格确实出现在fir </s>中，所以我不知道发生了什么事情！
谢谢
更新 – 我曾尝试@ mikeq的解决scheme，添加一个样式到类是身体的类。 添加到主页面样式表时这不起作用，但在添加萤火虫时它确实有效。 我假设这是因为萤火虫应用于页面上所有的所有ements，因为css没有应用在iframe中。 这是否意味着添加JavaScript的窗口加载后的CSS将工作？
iframe是页面中的一个“洞”，在其中显示另一个网页。 iframe的内容不是任何形状，也不构成父页面的一部分。
正如其他人所说，你的select是：
- 给iframe中加载的文件提供必要的CSS
- 如果iframe中的文件来自与您的父级相同的域，那么您可以从父级访问iframe中文档的DOM。
- 不要使用iframe（你确定你需要一个吗？）
下面的jquery脚本适用于我。 在Chrome和IE8上testing 内部的iframe引用与父页面位于同一个域的页面。
在这种特殊情况下，我隐藏了内部iframe中的特定类的元素。
基本上，你只需要在内部iframe的“头部”附加一个'style'元素。
$('iframe').load( function() { $('iframe').contents().find("head") .append($("<style type='text/css'> .my-class{display:none;} </style>")); });
您不能更改iframe中显示的页面样式，除非您有直接的访问权，并因此拥有源html和/或css文件。
这是为了阻止XSS（Cross Site Scripting）
一个iframe有另一个范围，所以你不能访问它的风格或改变其内容的JavaScript。
这基本上是“另一个页面”。
你唯一能做的就是编辑自己的CSS，因为用你的全局CSS你什么都做不了。
覆盖另一个域的 iframe CSS
通过使用SimpleSam5的答案的一部分，我用一些Tawk的聊天内置页框（他们的定制界面很好，但我需要进一步的定制）实现了这一点。
在移动设备上显示的这个特定的iframe中，我需要隐藏默认图标并放置一个背景图像。 我做了以下几点：
Tawk_API.onLoad = function() { // without a specific API, you may try a similar load function // perhaps with a setTimeout to ensure the iframe's content is fully loaded $('#mtawkchat-minified-iframe-element'). contents().find("head").append( $("<style type='text/css'>"+ "#tawkchat-status-text-container {"+ "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+ "background-size: 100%;"+ "} "+ "#tawkchat-status-icon {display:none} </style>") ); };
我没有任何Tawk的域名，这对我很有用，所以即使它不是来自同一个父域名（尽pipeJeremy Becker对Sam的回答发表评论 ），也可以这样做。
此代码使用香草JavaScript。 它创build一个新的<style>元素。 它将该元素的文本内容设置为包含新CSS的string。 并将该元素直接添加到iframe文档的头部。
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);
也许它现在已经改变了，但是我用了一个单独的样式表和这个元素：
.feedEkList iframe { max-width: 435px!important; width: 435px!important; height: 320px!important; }
成功embedded式的YouTube的内置框架风格…看到这个网页上的博客文章 。
给你的iframe页面的身体一个ID（或者如果你愿意的话）
<html> <head></head> <body id="myId"> </body> </html>
那么，也在iframe的页面中，为CSS分配一个背景
#myId { background-color: white; }
