Почему то есть, по-видимому, перекомпоновка DOM при встречеэлементы fbml при правильном использовании fbml xmlns? - PullRequest
Новая
       36

Почему то есть, по-видимому, перекомпоновка DOM при встречеэлементы fbml при правильном использовании fbml xmlns?

11 голосов
/ 04 мая 2011

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

HOWEVER ...

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

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

Любой, кто сталкивался с этимbefore?

ОБНОВЛЕНИЕ:

Некоторое дальнейшее копание выявило еще некоторые особенности ... Проблема действительно в том, что 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 оповещения, я ожидаю увидеть только одно.

1 Ответ

5 голосов
/ 16 мая 2011

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

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

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

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

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

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

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

Просто мысль ... Вы пытались загрузить "like" кнопки, используя метод 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);
}());
...