Почему то есть, по-видимому, перекомпоновка DOM при обнаружении <fb: xxx> элементов fbml при правильном использовании fbml xmlns?

Question

Почему то есть, по-видимому, перекомпоновка DOM при обнаружении <fb: xxx> элементов fbml при правильном использовании fbml xmlns?

У меня есть страница, содержащая несколько кнопок "Мне нравится" на Facebook, встроенных с использованием встроенного метода fbml (в отличие от iframe). Достаточно просто. Страница отображается нормально, все работает как положено.

ТЕМ НЕ МЕНИЕ...

Как только я добавлю xmlns:fb="http://www.facebook.com/2008/fbml" объявление пространства имен к документу Я заметил радикальное ухудшение начального времени отображения страницы в IE. Более тщательный анализ (с использованием инструментов разработчика ie8) показывает, что весь DOM, по-видимому, "обновляется" или "обновляется" снова и снова в течение короткого периода времени после первоначальной загрузки страницы. Некоторые дальнейшие оскорбления показывают, что количество повторений, по-видимому, пропорционально количеству <fb:xxx> элементы в документе.

Удаление объявления xmlns устраняет проблему.

Кто-нибудь испытывал это раньше?

ОБНОВИТЬ:

Дальнейшее копание выявило еще некоторые особенности... Проблема действительно в том, что IE повторно отображает страницу, включая повторное выполнение любых встроенных сценариев и так далее. Причина, по-видимому, заключается не в включении самого xmlns, а в отображении самих кнопок в xfbml. Добавление xmlns просто вызвало рендеринг xfbml, без xmlns кнопки никогда не отображались в первую очередь. Следующая разметка иллюстрирует проблему.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>  
    <script type="text/javascript">
      alert('some inline js');
    </script>
  </head>
  <body>
    <div id="fb-root"></div>

    <div>
      <fb:like href="http://example.local/1" layout="button_count" show_faces="false" width="80" action="like" font="arial" colorscheme="light"></fb:like>
      <fb:like href="http://example.local/2" layout="button_count" show_faces="false" width="80" action="like" font="arial" colorscheme="light"></fb:like>
      <fb:like href="http://example.local/3" layout="button_count" show_faces="false" width="80" action="like" font="arial" colorscheme="light"></fb:like>
    </div>

    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>

  </body>
</html>

При запуске в ie, приведенный выше пример генерирует 3 оповещения, я ожидаю увидеть только одно.

11

internet-explorer xml-namespaces repaint fbml reflow

Источник

user737869 04 май '11 в 11:41

1 ответ

Другие вопросы по тегам internet-explorer xml-namespaces repaint fbml reflow

user642861 16 май '11 в 00:36 2011-05-16 00:36 · Answer 1 · 2011-05-16 00:36

Вы, похоже, испытываете ошибку Facebook 9777. Это было вокруг с начала нового all.js. Я думаю, что было несколько попыток исправить это, но это не сработало. Похоже, приоритет только что поднялся на ступеньку выше на прошлой неделе. Давайте посмотрим, будет ли это исправлено в ближайшее время.

В любом случае, проблема, которую вы видите, не вызвана изменением дерева DOM. На самом деле, запускаемый javascript отсутствует даже на вашей странице... на вашей "верхней" странице.

Сценарий находится в iframes, созданных сценарием Facebook вместо вашего fb:like элементы.

Вместо "некоторых встроенных JS", если ваш alert показывает следующее:

alert("This: " + window.location.href + "\nTop: " + window.top.location.href);

Вы увидите, откуда это исходит. В "Это" URL вы увидите fb_xd_fragment вместе с целой кучей параметров, добавленных к вашему URL. По сути, скрипт facebook перенаправляет каждое окно iframe на URL-адреса, которые вы видите, что запускает ваши скрипты.

В http://developers.facebook.com/docs/reference/javascript/FB.init/ они обсуждают URL пользовательского канала (channelURL) инициировать параметр как обходной путь, который, похоже, не работает для многих людей. И многие люди получают потоки запросов на пути, который они предоставляют как channelURL.

Просто мысль... Вы пытались загрузить кнопки "лайк", используя метод iframe? Это было быстрее?

В противном случае вы можете попробовать лениво загрузить скрипт all.js...

(function() {
  var e = document.createElement('script');
  e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
  e.async = true;
  document.getElementById('fb-root').appendChild(e);
}());