11

我有一个包含许多 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 个警报，我希望只看到一个。

4

1 回答 1

5

您似乎遇到了 facebook bug 9777。自从新的 all.js 开始以来，它就一直存在。我认为已经有几次尝试修复它，但并没有真正奏效。看起来上周优先级刚刚提高了一个档次。让我们看看它是否会很快得到修复。

在任何情况下，您看到的问题都不是由 DOM 树被修改引起的。事实上，被触发的 javascript 甚至不在您的页面中……您的“顶部”页面就是这样。

该脚本位于 facebook 脚本创建的 iframe 中，以代替您的fb:like元素。

如果您显示以下内容，而不是"some inline js" ：alert

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

你会看到它来自哪里。在“这个”网址中，您会看到fb_xd_fragment附加到您的网址的一大堆参数。基本上，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);
}());
于 2011-05-16T00:36:38.630 回答