2

我使用了以下代码这是我的 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 的背景。我想将图像应用到它的背景。如何应用？

4

2 回答 2

1

设置 css 的代码在语义上似乎没问题，因为无法使用 html 来确保您是否正确使用了selectors. 您可能DOM在元素可用之前访问它们。frame 的元素可能不会在document.ready 事件上准备好，而是在window.load将代码放入 window.load 以确保 iframe 中的元素可用于脚本。

$(window).load(function){    
    $('#fblike').contents().find('.pluginButton').css({'background','#FF8000'});    
})
于 2013-01-31T05:56:04.613 回答
1

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

简短的回答是这是不可能的。这是在 SO 上发布的一个答案，其中有更详细的解释：我可以将 CSS 应用于 iframe 中的元素吗？

不，不是来自 iframe 之外。An是它自己的世界。如果域等匹配，则 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);
于 2013-01-31T06:40:48.323 回答