将CSS应用于Iframe内容

我使用下面的代码这是我的iframe：

 $('#fblike').contents().find('.pluginButton').css({'background','#FF8000'}); 

我也直接申请了Css

 .pluginButton { background: none repeat scroll 0 0 #FF8000 !important; } 

它还没有工作。我想改变pluginButton的背景。我想将图像应用到它的背景。如何申请？

Answer 1

如果我理解正确，那么你想要做的是将CSS注入加载Facebook页面的iframe。

简短的回答是，这是不可能的。 以下是在SO上发布的答案，其中包含更详细的说明： 我可以将CSS应用于iframe中的元素吗？

不，不是来自iframe之外。 一个是它自己的世界。 如果域等匹配，那么Javascript可以进出通信，并且可以（如果它想）将CSS注入到子帧中。

如果包含来自不同域的内容，那么您几乎无能为力。 父页面控制框架的大小以及它是否可见，并且可以通过定位等将其自己的内容放在框架上，但它不能直接影响实际框架内容的呈现方式。

以下是另一种解释： 如何将CSS应用于iframe？

编辑：这不适用于跨域。

这里有两个不同的东西：iframe块的样式和嵌入在iframe中的页面样式。 您可以通常的方式设置iframe块的样式：

嵌入在iframe中的页面样式必须通过将其包含在子页面中来设置：

或者可以使用Javascript从父页面加载：

 var cssLink = document.createElement("link") cssLink.href = "style.css"; cssLink .rel = "stylesheet"; cssLink .type = "text/css"; frames['frame1'].document.body.appendChild(cssLink); 

Answer 2

设置css的代码似乎在语义上是正确的，因为html不可用于确保您是否正确使用了selectors 。 您可能在DOM元素可用之前访问它们。 框架的元素可能不会在document.read y事件上准备就绪但在window.load上将代码放在window.load中以确保iframe中的元素可用于脚本。

 $(window).load(function){ $('#fblike').contents().find('.pluginButton').css({'background','#FF8000'}); })