覆盖iframe中内容的正文样式 [英] Override body style for content in an iframe

问题描述

如何在 iframe 中控制身体元素的背景图像和颜色？请注意，嵌入的body元素有一个类， iframe 属于我网站的一个页面。

How can I control the background image and colour of a body element within an iframe? Note, the embedded body element has a class, and the iframe is of a page that is part of my site.

我需要这个的原因是我的网站有一个分配给正文的黑色背景，然后分配给包含文本的div的白色背景。 WYSIWYG编辑器在编辑时使用 iframe 来嵌入内容，但它不包含div，因此文本很难阅读。

The reason I need this is that my site has a black background assigned to the body, and then a white background assigned to divs that contain text. A WYSIWYG editor uses an iframe to embed content when editing, but it doesn't include the div, so the text is very hard to read.

iframe 的主体在编辑器中有一个不在其他地方使用的类，所以我我假设这是放在那里所以这样的问题可以解决。但是，当我将样式应用于 class.body 时，它们不会覆盖应用于body的样式。奇怪的是，样式确实出现在Firebug中，所以我不知道发生了什么！

The body of the iframe when in the editor has a class that isn't used anywhere else, so I'm assuming this was put there so problems like this could be solved. However, when I apply styles to class.body they don't override the styles applied to body. The weird thing is that the styles do appear in Firebug, so I've no idea what's going on!

谢谢

更新 - 我尝试过@ mikeq的解决方案，为类添加样式身体的课。这在添加到主页的样式表时不起作用，但在使用Firebug添加时它确实有效。我假设这是因为Firebug应用于页面上的所有元素，而CSS不应用于iframe中。这是否意味着在使用JavaScript加载窗口后添加css会起作用？

UPDATE - I've tried @mikeq's solution of adding a style to the class that is the body's class. This doesn't work when added to the main page's stylesheet, but it does work when added with Firebug. I'm assuming this is because Firebug is applied to all elements on the page whereas the CSS is not applied within iframes. Does this mean that adding the css after window load with JavaScript would work?

推荐答案

iframe是页面中的一个洞，显示其中的另一个网页。 iframe的内容不是任何形状或父页面的一部分。

An iframe is a 'hole' in your page that displays another web page inside of it. The contents of the iframe is not in any shape or form part of your parent page.

正如其他人所说，您的选项是：

As others have stated, your options are:

• 如果iframe中的文件来自同一个域，则为iframe中加载的文件提供必要的CSS


• 您的父级，然后您可以从父级访问iframe中的文档的DOM。

这篇关于覆盖iframe中内容的正文样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！