jQuery意外错误地解析超文本标记语言

Question

所以我有一个非jQuery的解决方案来解决这个问题，但是如果有办法的话，我更愿意使用jQuery，而且我也很好奇为什么会发生这种情况。

我有一个Facebook iframe应用程序，我正在使用Facebox在页面弹出窗口中动态加载一些XFBML。

现在我加载的XFBML恰好是fb:serverfbml标记，它创建一个指向Facebook的iframe并呈现该FBML。这实际上意味着我需要动态添加FBML，然后在显示弹出窗口后重新解析XFBML。所以我的代码看起来像这样：

var App = {};

App.inviteFBML = '\
<fb:serverfbml style="width: 300px; height: 225px;"> \
    <script type="text/fbml">  \
        <fb:fbml>  \
        </fb:fbml>\
    </script>\
</fb:serverfbml>';

App.inviteFBMLHolder = "<div id='invite_holder' style='width: 300px; height: 250px;'></div>";

App.showInvitePrompt = function(){
    $.facebox(App.inviteFBMLHolder); 
    document.getElementById('invite_holder').innerHTML = App.inviteFBML;
    FB.XFBML.Host.parseDomElement(document.getElementById('facebox'));
};

现在上面的代码可以工作了，但是请注意，我使用的是

document.getElementById('invite_holder').innerHTML 

而不是

$('#invite_holder').html();

如果我使用jQuery的.html函数，它实际上会在插入之前重新构造我的HTML。它将其重新构造为以下内容：

<fb:serverfbml style="width: 300px; height: 225px;"> 
</fb:serverfbml>
<script type="text/fbml">  
    <fb:fbml>  
    </fb:fbml>
</script>

我假设它这样做是因为它包含非标准标记，但是有没有办法让jQuery在插入字符串之前不重新格式化它？

Answer 1

或者是jQuery的HTML解析器把事情搞乱了。因此，如果您手动设置innerHTML，它将很好地工作。

因此，您可以使用以下命令将其全部加载：

$.ajax({
  type:"GET",
  url: "/my/url",
  datatype: 'text',
  success: function(html) {
    var ele = $('myselector')[0];
    ele.innerHTML = html;
    FB.XFBML.Host.parseDomElement(ele);
  }
});

这样做的唯一问题是，包含在HTML语言中的任何JavaScript代码在插入时都不会运行。

Answer 2

因为您正在使用FB.XFBML.Host.parseDomElement(document.getElementById('facebox'));解析添加的html。我在冒险猜测这个函数应该是寻找简单的文本。您可以尝试使用jquery将内容添加为文本而不是HTML，如下所示：

$('#invite_holder').text(App.inviteFBML);

Answer 3

我正在做类似的事情，在jQuery重排我的代码时遇到了同样的问题，但我能够通过执行以下操作来绕过它：

<fb:serverfbml id="fbml">
</fb:serverfbml>

<script type="text/javascript">
function populateInviteFbml() {
    $('#fbml').load('/getinvitefbml', null, renderInvite); // gets the FBML from <script type="text/fbml"> on in
}

function renderInvite() {
   FB_RequireFeatures(['XFBML'], function() {
         FB.Facebook.init('abcdabcdabcdabcd', '/xd_receiver.htm');
            });
}
</script>