2

我想通过调整大小和偏移生成的 iframe 来隔离他们评论小部件中的 Facebook 个人资料图片。棘手的部分（或者在我看来）是生成的 iframe 包含内联样式。

有人愿意帮忙吗？

我确信这违反了 TOS，但这只是为了证明概念。

这是文档：http: //developers.facebook.com/docs/reference/plugins/comments/

这是推荐的代码：

<div id="fb-root"></div>
<script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=145044622175352";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://stackoverflow.com" data-num-posts="1" data-width="200"></div>

这是生成的源代码：

<div class=" fb_reset" id="fb-root"><div style="position: absolute; top: -2000px;"><iframe src="http://static.ak.facebook.com/connect/xd_arbiter.php?version=4#channel=f218f99fdee7694&amp;origin=http%3A%2F%2Fstackoverflow.com&amp;channel_path=%2Fquestions%3Ffb_xd_fragment%23%3F%3D%26xd_sig%3Df978c5a2550e88%26&amp;transport=postmessage" name="fb_xdm_frame_http" id="fb_xdm_frame_http"></iframe><iframe src="https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=4#channel=f218f99fdee7694&amp;origin=http%3A%2F%2Fstackoveflow.com&amp;channel_path=%2Fquestions%3Ffb_xd_fragment%23%3F%3D%26xd_sig%3Df978c5a2550e88%26&amp;transport=postmessage" name="fb_xdm_frame_https" id="fb_xdm_frame_https"></iframe></div><div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;"><div><iframe src="http://www.facebook.com/dialog/oauth?api_key=145044622175352&amp;app_id=145044622175352&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D4%23cb%3Df75bfba58018fa%26origin%3Dhttp%253A%252F%252Fstackoverflow.com%252Ff218f99fdee7694%26domain%3Dstackoverflow.com%26relation%3Dparent.parent&amp;client_id=145044622175352&amp;display=none&amp;domain=stackoverflow.com&amp;locale=en_US&amp;origin=1&amp;redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D4%23cb%3Dfc987f035fe9c2%26origin%3Dhttp%253A%252F%252Fkidnog.dev%252Ff218f99fdee7694%26domain%3Dkidnog.dev%26relation%3Dparent%26frame%3Df209b5ae6806ada&amp;response_type=token%2Csigned_request%2Ccode&amp;sdk=joey" class="FB_UI_Hidden" style="border: medium none; overflow: hidden; height: 240px; width: 575px;" name="f2ee3a0e40436fc" id="f209b5ae6806ada" scrolling="no"></iframe></div></div></div>
<script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=145044622175352";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments  fb_iframe_widget" data-href="http://stackoverflow.com" data-num-posts="1" data-width="200"><span><iframe src="https://www.facebook.com/plugins/comments.php?api_key=145044622175352&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D4%23cb%3Dfee6478d70ba1%26origin%3Dhttp%253A%252F%252Fkidnog.dev%252Ff218f99fdee7694%26domain%3Dstackoverflow.com%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fstackoverflow.com&amp;locale=en_US&amp;numposts=1&amp;sdk=joey&amp;width=200" class="fb_ltr" style="border: medium none; overflow: hidden; height: 213px; width: 200px;" name="f313c20e013258c" id="f6f0fea91f7fa" scrolling="no"></iframe></span></div>

理想的输出是这样的：

图片

而不是这样的：

评论

4

2 回答 2

1

您可能是对的，这很可能确实违反了他们的 TOS。但作为概念验证，我试图让它发挥作用。

当用户登录时，此解决方案似乎有效：http: //jsfiddle.net/joshdavenport/4VaVZ/。但是，当用户未登录时，框会停止匿名 facebook 个人资料照片的完全可见性。

Javascript没有取得任何成功，我认为因为一旦加载框架就会执行各种代码，停止修改，老实说，这很好！他们在阻止恶意代码注入方面做得很好。

于 2012-04-25T10:52:33.427 回答
1

使用overflow:hiddeniframe 和 javascript 的固定宽度/高度，.scroll()您可能会得到想要的结果。但是，我看不到在 iframe 中定位图像的方法（来自不同的域）。

PS：如果您不写“只是概念证明”，我将不会回答。永远不要使用它！:-)

于 2012-04-17T20:31:36.020 回答