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行为是正确的。改变库源是一种 BAD 练习，也是你可以做的最后一件事。更好的方法是使用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库添加到灯箱中 演示： link

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/

关闭后，lightbox不会加载Facebook插件

3 个答案: