>我使用了下面的代码这是我的Iframe:
<iframe scrolling='no' frameborder='1' id='fblike' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.XYZ.com%2F&send=false&layout=standard&width=450&show_faces=true&font&colorscheme=light&action=like&height=50'></iframe>
$('#fblike').contents().find('.pluginButton').css({'background','#FF8000'});
我也直接申请了 Css。
.pluginButton {
background: none repeat scroll 0 0 #FF8000 !important;
}
它仍然不起作用。我想更改插件按钮的背景。我想将图像应用于其背景。如何申请?
如果我理解正确,那么您要做的是将CSS注入加载Facebook页面的iframe中。
简短的回答是这是不可能的。以下是在SO上发布的答案,并有更详细的解释:我可以将CSS应用于iframe中的元素吗?
不,不是来自 iframe 之外。安是它自己的世界。如果域等匹配,那么Javascript可以进出通信,并且可以(如果它愿意)将CSS注入子框架。
如果包含来自不同域的内容,则几乎无能为力。父页面控制框架的大小及其是否可见,并且可以通过定位等将自己的内容放在框架上,但它不能直接影响实际框架内容的呈现方式。
这是另一个解释:如何将CSS应用于iframe?
编辑:这不适用于跨域。
这里有两个不同的东西:iframe 块的样式和嵌入在 iframe 中的页面的样式。您可以按常规方式设置 iframe 块的样式:
<iframe name='iframe1' id="iframe1" src="empty.htm" frameborder="0" border="0" cellspacing="0" style="border-style: none;width: 100%; height: 120px;"></iframe>
嵌入在 iframe 中的页面样式必须通过在子页面中包含它来设置:
<link type="text/css" rel="Stylesheet" href="Style/simple.css" />
或者可以使用Javascript从父页面加载它:
var cssLink = document.createElement("link") cssLink.href = "style.css"; cssLink .rel = "stylesheet"; cssLink .type = "text/css"; frames['frame1'].document.body.appendChild(cssLink);
设置 css 的代码在语义上似乎没问题,因为 html 不可用以确保您是否正确使用了selectors
。您可能正在DOM
元素可用之前对其进行访问。框架元素可能不会在 y 事件document.read
准备好,而是在window.load
将代码放在 window.load 中以确保 iframe 中的元素可用于脚本。
$(window).load(function){
$('#fblike').contents().find('.pluginButton').css({'background','#FF8000'});
})