Question

我正在尝试将Facebook multi-friend-selector放在Facebox中（不想在弹出新窗口时使用fb：对话框）。我遇到的问题可能源于在javascript中转义引号，但我一直在试图弄明白我的头撞墙。

有更好的方法吗？

$('#test_button').click(function(){
$.facebox(
    "<div id='box'>" +  
        "<fb:serverfbml width='615'>" +
          "<script type='text/fbml'>" +
            "<fb:request-form action='http://example.com/'" +
                "method='POST'" +
                "invite='true'" +
                "type='Example'" + 
                "content=""Echo Content. <fb:req-choice url=""http://example.com/""     label=""Example Label"" />"">" +
            "<fb:multi-friend-selector showborder='false'" +
                "bypass='cancel'" +
                "cols=4" +
                    "actiontext='Invite Friends To Example'/>" +
            "</fb:request-form>" +
          "</script>" +
        "</fb:serverfbml>" +            
    "</div>"
);
});

注意：为了这篇文章的目的，我替换了所有的example.com内容。从Facebox字符串中取出时，多朋友选择器代码可以正常工作。

提前感谢您的帮助。

Answer 1

<fb:serverfbml>标记必须从一开始就出现在页面上，您无法动态添加它。其中的一切都可以是动态的。

因此，为<fb:serverfbml>分配一些id，然后在需要时将fbml加载到其中。

在页面上：

<div id='box'>
    <fb:serverfbml width='615' id='invite_box'></fb:serverfbml>
</div>

脚本：

$('#test_button').click(function(){
    $("#invite_box").html(
          "<script type='text/fbml'>" +
            "<fb:request-form action='http://example.com/'" +
                "method='POST'" +
                "invite='true'" +
                "type='Example'" + 
                "content=""Echo Content. <fb:req-choice url=""http://example.com/""     label=""Example Label"" />"">" +
            "<fb:multi-friend-selector showborder='false'" +
                "bypass='cancel'" +
                "cols=4" +
                    "actiontext='Invite Friends To Example'/>" +
            "</fb:request-form>" +
          "</script>"
    );

});

更新2

尝试在fb init中禁用自动fbml解析：

FB.init({xfbml: false});

然后在加载后手动解析fbml：

$('#test_button').click(function(){
    $("#invite_box").html(...);
    FB.XFBML.parse($("#box")[0]);
});

如果这不起作用，请尝试从fbml中删除<script type='text/fbml'></script>包装器（我的代码中没有它，没有它就可以正常工作）。

Answer 2

对于任何人可能遇到同样的问题，这是最终有效的组合。感谢@serg帮助我找到了解决方法。

<div id='invite_button'><button type='button' id='test_button'>Add Friends</button></div>

<div id='outside_invite_box' style='display:none;'>     
    {% include 'poigsocial/fb_invite_friends.html' %}
</div>

<!-- Contents of fb_invite_friends.html -->
<div id='inside_invite_box'>    
<fb:serverfbml width="615">
    <script type="text/fbml">
        <fb:request-form action="http://example.com/"
            method="POST"
            invite="true"
            type="Example"
            content="Blah Blah Blah <fb:req-choice url='http://example.com/' label='Join' />">
            <fb:multi-friend-selector showborder="false"
                bypass="cancel"
                cols=4
                rows=4
                actiontext="Invite Facebook Friends"/>
        </fb:request-form>
    </script>
</fb:serverfbml>            
</div>  

<script type="text/javascript">
$(document).ready(function(){

    $('#test_button').click(function(){
        $.facebox({ div: '#inside_invite_box' }, 'invite_lightbox');        
    }); 
});
</script>

Answer 3

我知道我的答案很晚，但您可以尝试将其作为外部html加载到隐藏的iframe中。然后只需在facebox中显示这个iframe：

<iframe src="multiselector.html" id="invite" style="display:none;width:624px; height:485px; border:0;"></iframe>

<a href="#invite" rel="facebox">invite friends</a>

代码段中有很多内联属性，但这只是为了显示其属性。

希望它有所帮助。

无法在脸谱盒中使用Facebook多友情选择器

3 个答案: