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

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

У меня есть приложение Facebook iframe, и я использую 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();

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

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

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


facebook jquery fbml facebook-fbml xfbml
person jtymann    schedule 05.10.2009    source источник
comment
Кто-то может захотеть переименовать заголовок для этого, так как это не html, который неправильно анализируется, а скорее собственный формат Facebook.   -  person ironsam    schedule 01.01.2010
comment
... но он разбирается неправильно... часть реализации FBML включает добавление объявления xmlns:fbml к элементу ‹html›, так что это допустимо.   -  person Daniel Schaffer    schedule 01.01.2010
comment
Делает ли добавление пространства имен xml в документ html, а затем использование тегов xml из указанного пространства имен xml теги действительными html? Конечно, этот материал не подтвердился бы.   -  person ironsam    schedule 02.01.2010
comment
@ironsam, это делает его действительным xml/xhtml, и да, он должен проверяться.   -  person Daniel Schaffer    schedule 22.01.2010

Ответы (4)


arrow_upward
3
arrow_downward

В качестве альтернативы, это HTML-парсер jQuery, который все портит. Поэтому, если вы установите 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, не будет запущен при вставке.

person Tal    schedule 19.02.2010
comment
Спасибо, была такая же проблема, решил. Это должен быть принятый ответ! - person Matt Huggins; 08.02.2011

arrow_upward
1
arrow_downward

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

$('#invite_holder').text(App.inviteFBML);
person TheVillageIdiot    schedule 05.10.2009
comment
Хорошая попытка, однако использование .text экранирует любые html-символы, которые обычно должны экранироваться в тексте. Таким образом, вместо того, чтобы получать xfbml с возможностью рендеринга, я получаю текстовую версию моего html. - person jtymann; 05.10.2009

arrow_upward
1
arrow_downward

Я делал что-то подобное, у меня были те же проблемы с перестановкой кода 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>
person Daniel Schaffer    schedule 30.12.2009

arrow_upward
0
arrow_downward

Похоже, что 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>");
person ironsam    schedule 31.12.2009