覆盖 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 中加载的文件提供必要的 CSS
• 如果 iframe 中的文件与您的父级来自同一域，那么您可以从父级访问 iframe 中文档的 DOM.

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