jQuery load() 和 Facebook XFBML 的问题答案

【问题标题】：Problem with jQuery load() and Facebook XFBMLjQuery load() 和 Facebook XFBML 的问题
【发布时间】：2011-03-14 13:00:14
【问题描述】：

情况

我像这样打开一个层（jQueryUI）。

$("#dialog").load('userinfo.html #layer').dialog('open');

userinfo.html 显示 Facebook 用户的照片和姓名。

  <html xmlns:fb="http://www.facebook.com/2008/fbml">
    <...some code...>
    <div id="layer">
      <script type="text/javascript">
        $(function() {   
        FB.init("2342342423424", "http://www.mysite.com/xd_receiver.htm");  
        });
      </script>  
      <fb:profile-pic uid="200000999530485" size="square" linked="true"></fb:profile-pic> <fb:name uid="200000999530485"></fb:name>
     </div>
   <...some code...>
</html>

问题：

图层打开，但 fbml 标签未呈现！ 请帮忙。我认为 load() 不会加载 js 部分。

（如果我在浏览器中打开 userinfo.html 一切正常）

【问题讨论】：

标签： php jquery facebook jquery-ui xfbml

【解决方案1】：

据我所知，facebook 需要这个命名空间：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

确保您指定了它或尝试将 id 分配给它而不是后面的 div：

<html id="layer" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

【讨论】：

【解决方案2】：

如果 FBML 标签从一开始就没有出现在页面上，则不会呈现它们（即，您通过 ajax 将 fbml 标签加载到某些 div 中）。为了渲染它们，您需要做一些额外的工作。

首先，所有 js 的东西都应该移动到你的主窗口（fb js include，fb init）。 userinfo.html 应该只包含 fbml 和 html。 FB.init({xfbml : false}) 中应该禁用自动 FBML 解析（我不记得了，它可能与自动解析一起工作，但我想我必须将其关闭）。

你需要用fb:serverFbml标签标记你未来的fbml将被动态加载的地方：

<div id="dialog">
    <fb:serverFbml id="dialog-fbml"></fb:serverFbml>
</div>

您的 fbml 加载脚本现在看起来像：

$("#dialog-fbml").load('userinfo.html #layer'); //load fbml
FB.XFBML.parse($("#dialog")[0]); //parse it
$("#dialog").dialog('open'); //show

【讨论】：

谢谢，但这会在当前选项卡中打开 userinfo.html：FB.XFBML.parse($("#dialog"));
@fabian：据我所知#dialog 只是您页面上的一个 div，您想通过动态加载的 fbml 将其变成弹出窗口？只需将其隐藏，直到显示出来。
@fabia: 见 daaku'a 答案，需要将解析放入 load 的回调中。

【解决方案3】：

如果我延迟解析 XFBML，一切正常。 dialog('open') 没有回调方法吗？

      $("#dialog").load('userinfo.html #layer');
      $("#dialog").dialog('open');        
      setTimeout(function() {FB.XFBML.parse(document.getElementById('#dialog'));} ,4000);

【讨论】：

【解决方案4】：

我认为这应该可行：

$("#dialog").load('userinfo.html #layer', function() {
  FB.XFBML.parse(document.getElementById('dialog'));
});
$("#dialog").dialog('open');

请注意，它在加载回调中被调用，以确保在触发 XFBML 解析之前完成 Ajax 请求并加载数据。

【讨论】：

好点，应该在加载回调时解析 fbml。那是我错了。
@serg555 - 是的，完全正确。添加了一条注释以强调这一事实。