4

所以我有一个非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 在插入之前不重新格式化我的字符串？

4

4 回答 4

3

或者是 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 代码都不会在插入时运行。

于 2010-02-19T22:59:55.887 回答
1

我正在做类似的事情，在 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>
于 2009-12-30T22:50:12.133 回答
1

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

$('#invite_holder').text(App.inviteFBML);
于 2009-10-05T17:29:34.367 回答
0

<script>与不在脚本块中的普通 html 标签相比，jQuery 看起来对在标签内创建的内容要宽松得多。您可以先使用 id 创建外部非 html 标记，然后附加到该标记：

$(".inner").append("<fb:serverfbml id='someID' style='width:300px; height: 225px;'>");
$("#someID").append("<script type='text\fbml'><fb:fbml></fb:fbml></script>");
于 2009-12-31T23:04:48.450 回答