jQuery разбора HTML неожиданно и неправильно

Question

У меня есть решение для этой проблемы, но я бы предпочел использовать jQuery, если есть способ, а также мне очень любопытно, почему это происходит.

У меня есть приложение iframe для Facebook, и я использую Facebox для динамической загрузки некоторого XFBML во всплывающем окне.

Теперь XFBML У меня есть загрузка, это тег fb:serverfbml, который создает iframe, указывающий на Facebook, и отображает 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(); 

Если я использую .html функции JQuery в IT на самом деле реструктурирует мой HTML, прежде чем вставлять его. Он перестраивает его на следующее:

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

Я предполагаю, что он делает это, потому что он содержит нестандартные тег, но есть ли способ, чтобы Jquery не переформатировать свою строку, прежде чем вставить его?

Answer 1

Как вы используете FB.XFBML.Host.parseDomElement(document.getElementById('facebox')); для анализа добавленного html. Я опасаюсь, что функция должна искать простой текст. Вы можете попробовать добавить материал в виде текста, а не HTML с помощью JQuery, как:

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

Answer 2

я делал что-то подобное, что одни и те же проблемы с 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> 

Answer 3

похоже Jquery гораздо более снисходительны, что создается внутри тега <script> против того, что обычные HTML-теги не в блоке сценария. Вы можете создать внешнюю без HTML тег сначала с идентификатором, а затем добавить к этому:

$(".inner").append("<fb:serverfbml id='someID' style='width:300px; height: 225px;'>"); 
$("#someID").append("<script type='text\fbml'><fb:fbml></fb:fbml></script>"); 

Answer 4

Альтернативно это 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 будет работать при вставке.