jQuery解析HTML意外和錯誤

所以我有一個非jQuery解決這個問題，但我寧願使用jQuery，如果有一種方式，我也很好奇，爲什麼發生這種情況。jQuery解析HTML意外和錯誤

我有一個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的插入之前沒有重新格式化我的字符串？

來源

2009-10-05 jtymann

有人可能想要重命名標題，因爲它不是HTML被錯誤地解析，而是一個專有的Facebook格式。 – ironsam 2009-12-31 23:07:58

...但它*被錯誤地解析... FBML實現的一部分涉及向元素添加一個xmlns：fbml聲明，所以它是有效的。 – 2010-01-01 06:18:49

是否將一個xml名稱空間添加到一個html文檔中，然後使用來自所述xml名稱空間的xml標籤使這些標籤有效的html？當然這個東西不會被驗證。 – ironsam 2010-01-01 23:58:49

正如您使用FB.XFBML.Host.parseDomElement(document.getElementById('facebox'));解析添加的html。我冒着猜測功能應該尋找簡單的文本。你可以嘗試添加的東西作爲文本而不是HTML使用jQuery，如：

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

來源

2009-10-05 17:29:34 TheVillageIdiot

不錯的嘗試，但是使用.text會轉義任何通常應該在文本中轉義的html字符。因此，而不是得到呈現能夠xfbml，我得到我的html的文本版本 – jtymann 2009-10-05 17:40:19

： - /這是如此糟糕..... – TheVillageIdiot 2009-10-05 18:40:13

我在做類似的東西，就用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-30 22:50:12

看起來jQuery是寬鬆得多了<script>標籤內部創造了什麼與什麼正常的HTML標記不是在一個腳本塊。你可以用一個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-31 23:04:48 ironsam

或者是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); 
    } 
});

唯一的問題與此是沒有的JavaScript代碼包含在HTML將在插入時運行。

來源

2010-02-19 22:59:55 Tal

謝謝，有同樣的問題，並且這固定它。這應該是被接受的答案！ – 2011-02-07 23:21:35

jQuery解析HTML意外和錯誤

回答

相關問題