Facebook Canvas APP (Iframe) 自动高度调整大小答案

【问题标题】：Facebook Canvas APP (Iframed) Auto-Height ResizeFacebook Canvas APP (Iframe) 自动高度调整大小
【发布时间】：2010-10-20 22:17:04
【问题描述】：

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

有其他人遇到过这个问题或提出解决方案吗？

谢谢！

埃里克

【问题讨论】：

Barbolo 在底部的答案是您正在寻找的答案，自动调整大小已被折旧并替换为自动增长，这为我解决了同样的问题。

标签： facebook

【解决方案1】：

在</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"> 之前，问题就解决了。

【讨论】：

【解决方案2】：

扩展已经提到的几点：

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;
}

【讨论】：

你的建议在 Firefox 问题上帮助了我很多，tx
溢出：隐藏帮助了我的小问题，但 setAutoGrow() 没有解决

【解决方案3】：

FB.Canvas.setAutoResize 将被弃用，您应该使用 FB.Canvas.setAutoGrow，因为它完全符合您的要求。

【讨论】：

抱歉打断，但我无法在 Firefox 中使用它？？ Chrome 和 IE 都会自动增长画布。有什么建议吗？
您应该确保在文档加载后调用此函数。在 Facebook 脚本初始化之后调用它是不够的。
@barbolo 不对。此函数设置时间间隔，因此，当您第一次调用它时，它并没有什么区别。然而，这个函数是有故障并且经常失败，尤其是在FF9中。
@Guy 它实际上有所作为。如果在 iframe 初始化之后调用该函数，它就可以工作。
@barbolo 好吧，恭喜你发现了一个错误。 :)

【解决方案4】：

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。

【讨论】：

抱歉，看不出有什么区别……这个新的和旧的怎么比？

【解决方案5】：

嗯...自动调整大小是错误的，只是有时工作

您可以像这样手动设置它： FB.Canvas.setSize({ height: $('body').height() });

【讨论】：

如果在你的应用程序中使用了 jQuery :-)

【解决方案6】：

如果有人仍然有这个问题，那是因为你的FB.init() 永远不会被调用。就我而言，我将它放在我的 jQuery document.ready 函数中。不要那样做！

把它放在你的 jQuery 之外：

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

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

【讨论】：

【解决方案7】：

自动调整大小不起作用。这是facebook尚未修复的主要错误。

但是，这里是解决问题的代码：

<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>

【讨论】：