Facebook Canvas APP（Iframed）Auto-Height Resize

Question

最近使用Facebook canvas 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>

这里有官方文件。

Answer 4

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

Answer 5

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

把它放在你的jQuery之外：

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

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

Answer 6

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

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

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