php - 将 CSS 应用于 Iframe 内容

Question

我使用了下面的代码 这是我的 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

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

仍然不起作用。我想更改pluginButton的背景。我想将图像应用到其背景。如何应用？

Answer 1

如果我理解正确的话，那么您想要做的就是将 CSS 注入(inject)到加载 Facebook 页面的 iframe 中。

简单的回答是这是不可能的。这是发布在 SO 上的答案，其中有更详细的解释:Can I apply CSS to the elements within an iframe?

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.

这是另一个解释:How to apply CSS to iframe?

Edit: This does not work cross domain.

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="iframe1" src="empty.htm" frameborder="0" border="0" cellspacing="0" style="border-style: none;width: 100%; height: 120px;"></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" rel="Stylesheet" href="Style/simple.css" />

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);