2012-04-17 54 views
2

我想通過調整大小和偏移生成的iframe來在其評論窗口小部件中分離Facebook個人資料照片。棘手的部分(或者我認爲)是生成的iframe包含內聯樣式。如何使用內聯樣式調整javascript生成的iframe的大小?

有人幫忙嗎?

我確定這是違反服務條款,但它只是爲了一個概念證明。

這裏是DOC: 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> 

理想的輸出是一樣的東西:

pic

,而不是像這樣:

comment

回答

1

你很合適,這很可能違反了他們的服務條款。但作爲一個概念驗證,我試圖讓它工作。

此解決方案似乎在用戶登錄時起作用:http://jsfiddle.net/joshdavenport/4VaVZ/。但是,當用戶未登錄時,框停止anonymous facebook profile photo的完整可見性。

Javascript沒有給出任何成功,我認爲是因爲在加載框架時會執行所有類型的代碼,停止修改,說實話,這很好!他們在阻止惡意代碼被注入方面做得很好。

+0

史詩!有用! – Ryan 2012-04-25 19:37:16

1

隨着overflow:hidden,在iframe和JavaScript .scroll()的固定寬度/高度荷蘭國際集團可能會得到期望的結果。但是,我無法在iframe中找到圖像(來自不同的域)。 PS:如果你沒有寫「只是概念證明」,我不會回答。永遠不要使用它! :-)

+0

謝謝。我一直在嘗試各種各樣的變化而沒有進步。要小心這個答案嗎? – Ryan 2012-04-17 20:52:30

相關問題