Facebook Canvas应用程序（Iframed）自动调整大小

最近在使用Facebook canvas iframe应用程序时遇到问题。我已将我们的设置设置为“自动调整大小”，并实施了正确的FB JS调用来调整高度的大小（以避免不必要的滚动条），但它似乎不起作用。Facebook Canvas应用程序（Iframed）自动调整大小

有没有其他人有这个问题或想出一个解决方案？

谢谢！

Erik

来源

2010-10-20 Erik Smith

Barbolo的回答底部是你正在寻找，自动调整一个已经贬值并带有自动更换增长，即固定同样的问题对我来说。 – scott 2012-10-09 08:34:44

自动调整大小不起作用。这是Facebook尚未修复的一个主要bug。

然而，这里的工作代码为周围的问题：

<div id="fb-root"></div> 
<script type="text/javascript"> 
    window.fbAsyncInit = function() { 
     FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true}); 
    }; 
    (function() { 
     var e = document.createElement('script'); 
     e.type = 'text/javascript'; 
     e.src = document.location.protocol + 
      '//connect.facebook.net/en_US/all.js'; 
     e.async = true; 
     document.getElementById('fb-root').appendChild(e); 
    }()); 
    </script> 
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script> 
<div id='FB_HiddenContainer' style='display:none;position:absolute;left:-100px;top:-100px;width:0;height:0'> 
</div> 
<script type="text/javascript"> 
    window.onload = function(){ 
    FB_RequireFeatures(['CanvasUtil'], function(){ 
     FB.CanvasClient.setCanvasHeight('1500px'); 
    }); 
    }; 
</script>

来源

2011-01-11 23:13:13 Roozbeh15

Roozbeh是对他的回答正确的道路上。然而，他的代码很可能会产生一个错误（至少在Firefox中），因为旧的和新的SDK都被引用（并且它们彼此之间不能很好地发挥作用）。

而且，只是用新的SDK来调整高度是超级简单：

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

可用here正式文件。

来源

2011-01-17 17:41:26 Kon

对不起，看不到那里的区别...这是新的还是旧的？ – 2012-05-23 12:32:47

嗯......自动调整大小是越野车，只有工作有时

您可以手动设置它像这样： FB.Canvas.setSize（{身高：$（“身体”）的高度（）} ）;

来源

2011-04-19 22:44:59

如果在您的应用程序中使用jQuery :-) – SamiSalami 2012-08-06 14:12:28

FB.Canvas.setAutoResize将被弃用，您应该使用FB.Canvas.setAutoGrow，因为它确实如您所愿。

来源

2011-09-30 18:28:21 barbolo

抱歉打断，但我不明白它在Firefox中工作？ Chrome和IE都会自动增加画布。有什么建议么？ – alex 2011-12-22 09:34:48

您应确保在文档加载后调用此函数。在Facebook脚本初始化后调用它是不够的。 – barbolo 2011-12-23 00:36:26

@barbolo不正确。这个函数设定的时间间隔，因此，当你第一次调用它时并没有真正的区别。然而，这个函数*很糟糕，经常失败，特别是在FF9中。 – Gajus 2012-01-17 13:55:42

扩展在几个百分点已经指出：

window.fbAsyncInit = function() { 
     FB.init({ 
      appId: 'YOUR APP ID', 
      status: true, 
      cookie: true, 
      xfbml: true, 
      oauth: true 
     }); 
     FB.Canvas.setAutoGrow(true); 
    };

这将允许在应用中高度动态变化。另外，在你的CSS设置明确的宽度像这样可以很好的帮助：

html { 
    width: 760px; 
    overflow: hidden; 
}

来源

2011-09-30 20:15:51

你的建议帮助我了很多与Firefox的问题，tx – alex 2011-12-22 10:07:47

溢出：隐藏帮助我未解决的小问题setAutoGrow（） – 2012-12-04 22:33:56

之前</body>标签，我已经写了下面的代码。

<div id="fb-root"></div> 
<script type="text/javascript"> 
      window.fbAsyncInit = function() { 
       FB.init({ 
        appId: '<?php echo YOUR_APP_ID ?>', 
        cookie: true, 
        xfbml: true, 
        oauth: true 
       }); 
       FB.Canvas.setAutoGrow(true); 
      }; 
      (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>

它对我来说工作正常。

高级应用程序设置中height是否为Fixed or Fluid并不重要。

FB.Canvas.setAutoGrow(true);没有在我的应用程序中工作，但我发现我错过了<div id="fb-root"></div>代码。我只是把它放在<script type="text/javascript">之前，并解决了问题。

来源

2012-02-23 07:29:07 gautamlakum

+1谢谢我工作 – Joshc 2012-04-25 22:30:43

这仍然是今天工作！ – jsims281 2012-08-15 15:41:11

仍适用于我。试用safari和firefox！ – 2012-09-25 16:50:37

如果有人仍然有这个问题，它的原因是你的FB.init()永远不会被调用。在我的情况下，我把它放在我的jQuery document.ready函数中。不要这样做！

把这个之外您的jQuery：

$(function() { ... jquery here... }); 

// do FB stuff 
FB.init({appId: 'APP_ID', status: true, cookie: true }); 
FB.Canvas.setAutoGrow();

来源

2013-03-14 17:02:59 wesbos

Facebook Canvas应用程序（Iframed）自动调整大小

回答

相关问题