javascript - facebook javascript SDK : FB. Canvas.setAutoResize iFrame 不工作？

Question

我们使用 ruby​​/rails 和 facebooker(iframe 应用程序)构建了一个 facebook 应用程序，目前卡在 FB.Canvas.setAutoResize 上，在某些情况下似乎会失败。使用 facebook 开发人员文档中的示例(参见 http://developers.facebook.com/docs/reference/javascript/)。一旦你进入一个高于 800px 的页面，自动调整大小就会失败 - 也就是说，只要 Canvas 变大它就可以工作，而不是当它变小时。有人有线索或解决方法吗？

这是调整大小的代码片段

<div id="fb-root" style="width:1px;height:1px;position:absolute;"></div> 
<script type="text/javascript"> 
  window.fbAsyncInit = function() {
    FB.init({appId: '126342024064822', status: true, cookie: true, xfbml: true});
    FB.Canvas.setAutoResize(true,100);
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

我非常感谢任何评论或提示，因为我现在已经为这个问题绞尽脑汁超过一天了。

Answer 1

需要确保在应用程序设置中设置的一些关键事项:

1. Canvas 设置 -> 渲染方法 = iFrame
   
2. Canvas 设置 -> iFrame 大小 = 可调整大小
   
3. 迁移 -> 新 SDK = 已启用

接下来通过添加超时来调整您的代码(250 似乎效果最好，但您可能想要进一步试验)。我已经在 FF3.6 和 IE7+ 中对此进行了测试。在 IE 中，垂直滚动条会瞬间闪烁，我仍在努力修复。

<div id="fb-root"></div> 
<script type="text/javascript"> 
  window.fbAsyncInit = function() {
    FB.init({appId: '12345678910', status: true, cookie: true, xfbml: true});
  window.setTimeout(function() {
    FB.Canvas.setAutoResize();
  }, 250);
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>