将CSS应用于Iframe内容 [英] Apply CSS to Iframe Content

问题描述

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

I have used below code This is my Iframe:

<iframe scrolling='no' frameborder='1' id='fblike' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.XYZ.com%2F&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=50'></iframe>

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

我还直接申请了Css

I have also applied Css directly

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

仍然无法正常工作。我想改变pluginButton的背景。我想要将图像应用到它的背景。如何申请？

Still it is not working.I want to change pluginButton's background.I want to apply image to its background.How to apply?

推荐答案

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

If I understand you correctly, then what you want to do is inject CSS into the iframe which loads a Facebook page.

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

The short answer is that it is not possible. Here is an answer posted on SO with a more detailed explanation: Can I apply CSS to the elements within an iframe?

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

No, not from outside the iframe. An is its own world. If the domains etc. match, then Javascript can communicate in and out, and could (if it wanted to) inject CSS into a child frame.

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

If the contains content from a different domain, there's pretty much nothing you can do. The parent page controls the size of the frame and whether it's visible, and can put its own content over the frame by positioning etc, but it can't directly effect the way the actual frame content is rendered.

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

编辑：这不适用于跨域。

This does not work cross domain.

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

There are two different things here: the style of the iframe block and the style of the page embedded in the iframe. You can set the style of the iframe block the usual way:

< iframe name ='iframe1'id =iframe1src = empty.htmframeborder =0border =0cellspacing =0style =border-style：none; width：100％; height：120px;>< / iframe>

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

The style of the page embedded in the iframe must be either set by including it in the child page:

< link type =text / css =样式表href =Style / simple.css/> ;

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

Or it can be loaded from the parent page with Javascript:

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

这篇关于将CSS应用于Iframe内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！