jQuery анализирует HTML неожиданно и неправильно - PullRequest
Новая
       45

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

4 голосов
/ 05 октября 2009

Так что у меня есть не-1001 * jQuery решение этой проблемы, но я бы предпочел использовать 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();

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

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

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

Ответы [ 4 ]

3 голосов
/ 20 февраля 2010

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

1 голос
/ 31 декабря 2009

Я делал нечто подобное, у меня были те же проблемы с 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>
1 голос
/ 05 октября 2009

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

$('#invite_holder').text(App.inviteFBML);
0 голосов
/ 01 января 2010

Похоже, что 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>");
...