Question

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

是否还有其他人遇到此问题或提出解决方案？

谢谢！

埃里克

Answer 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">之前，并解决了问题。

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

Answer 3

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。

Answer 4

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

Answer 5

自动调整大小不起作用。这是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>

Answer 6

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

您可以像这样手动设置： FB.Canvas.setSize（{height：$（'body'）。height（）}）;

Answer 7

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

把它放在你的jQuery之外：

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

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

Facebook Canvas APP（Iframe）Auto-Height Resize

7 个答案: