燈箱關閉后不加載Facebook插件

Question

我有這個腳本：

<a id="editprofile" href="#edit_profile">123</a>
<div style="display: none;">
<div id="edit_profile" style="width:640px;height:auto;overflow:auto;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"> </script><fb:comments href="apps.facebook.com/conteststwenty/" num_posts="2" width="620"></fb:comments>
</div>
</div>

和js：

$("#editprofile").fancybox({
      'titlePosition'        : 'inside',
     'transitionIn'        : 'none',
     'transitionOut'        : 'none'
 });

或參見jsfiddle 。

發生的是我在內部加載了一個簡單的Facebookplugin（可以是任何FB插件）

在第二次關閉燈箱后，便沒有顯示該插件。 有任何想法如何使它起作用，或者建議另一個可以解決問題的燈箱？

Answer 1

它沒有顯示第二次，因為fancybox onclose處理程序會重置其在內容中找到的所有iframe的src屬性。 因此，下次打開fancybox時，假設具有FB內容的iframe的src

為了克服這個問題，您可以在fancybox js src中注釋掉以下行：

content.find('iframe').attr('src', isIE6 && /^https/i.test(window.location.href || '') ? 'javascript:void(false)' : 'about:blank');

在此處檢查更新的示例： http : //jsfiddle.net/muHXe/4/

Answer 2

雖然@WTK關於src屬性和Fancybox行為是正確的。 改變庫源是一種不好的做法，你可以做的最后一件事。 更好的方法可能是使用onStart事件：

$("#editprofile").fancybox({
    'titlePosition': 'inside',
    'transitionIn': 'none',
    'transitionOut': 'none',
    'onStart': saveSrc,
});
var src = '';
var $commentsContainer = $("#edit_profile");
function saveSrc() {
    if(!src) {
        // First time here, we still have the src attribute so 
        // grab it and save it for later!
        src = $commentsContainer.find('iframe').attr('src');
    } else {
        $commentsContainer.find('iframe').attr('src', src)
    }
}

另外，您不應該在燈箱中添加fb-root和Facebook JS庫。
演示： 鏈接

Answer 3

我同意給出的兩種解決方案..您也可以嘗試

$(document).ready(function() {
var mySRC = "";
$("#editprofile").fancybox({
    'titlePosition': 'inside',
    'transitionIn': 'none',
    'transitionOut': 'none',
    'onComplete': function() {
        mySRC = $('#edit_profile iframe').attr('src');
    },
    'onClosed': function() {
        $('#edit_profile iframe').attr('src', mySRC);

    }
});
});

這是烏拉圭回音的小提琴http://jsfiddle.net/muHXe/7/