如何在點擊時使用FB Like按鈕隱藏iframe？

Question

我正在使用以下代碼（標准FB Like）：

<div id="like"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></div>

當用戶單擊它時，我需要隱藏完整的div （或iframe ）。

我嘗試了onclick事件，但在iframe不起作用。

我怎樣才能做到這一點？

Answer 1

您可以執行以下操作：

HTML：

<div id="like"><iframe id="facebookFrame" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></div>

Javascript：

document.getElementById('facebookFrame').contentWindow.document.body.onclick = 
function() {
  // hide your iframe here or do whatever
  document.getElementById('facebookFrame').style.display = "none";
  alert("iframe was clicked");
}

Answer 2

我還沒有做。 剛剛找到了一個很好的資源http://softwareas.com/cross-domain-communication-with-iframes

也許那樣

parent.frames[1].location.href -> set to own url plus #anyanchor

這樣就不會被重新加載，然后訪問主窗口的js函數

document.getElementById('facebookFrame').style.display = "none";

Answer 3

實際上，我認為您最好的選擇是在iframe再放置一次 ，這次是透明的div 。 在其上設置點擊處理程序。

Answer 4

您也可以嘗試以下解決方案：

FB.Event.subscribe('edge.create', function(href, widget) {
        your call back function to hide the iframe
});