Question

我想自定义Facebook Feed的设计，为此我想在Facebook iframe中添加自定义样式表。

我有什么

<iframe width="1000px" height="1000px" frameborder="0" name="f1e348592ed856c" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" style="border: medium none; visibility: visible; width: 340px; height: 500px;" src="http://www.facebook.com/v2.3/plugins/page.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FKTWTb9MY5lw.js%3Fversion%3D41%23cb%3Df46f9e2a3b7b8%26domain%3D10.0.0.101%26origin%3Dhttp%253A%252F%252F10.0.0.101%252Ff24c367e49e04c%26relation%3Dparent.parent&amp;container_width=1584&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=true&amp;show_posts=true" class=""></iframe>

我尝试了什么

$(document).ready(function(){              
var $head = $("iframe").contents().find("head");                
$head.append($("<link/>", 
    { rel: "stylesheet", href: "style.css", type: "text/css" }));

});

或

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

我有很多谷歌，但无法找到任何有效的解决方案。一些脚本在普通的iframe中运行，但facebook iframe无效。

我还创建了 jsFiddle File

任何帮助将不胜感激！

Answer 1

您无法以这种方式访问或更改IFrame内容，因为这是跨域iframe。您的浏览器将拒绝任何此类操作。这正是你得到的：http://screencast.com/t/Uu6TXWFW

Answer 2

是的，通常你可以修改iframe的内容，样式等，但只有当它不是跨域的时候 - 从你的域中你不能修改Facebook的iframe的内容。

其次 - 我不确定Facebook的规定是否合适 - 我的意思是修改其小部件和插件的样式。

在facebook iframe中添加自定义样式表

2 个答案: