logo标签列表

Facebook画布应用程序（内嵌）自动高度调整

facebook
12
最近使用Facebook画布iframe应用程序时遇到问题。 我已将设置设置为“自动调整大小”，并实施了正确的FB JS调用来调整高度（以避免不必要的滚动条），但似乎没有起作用。
是否有其他人遇到过此问题或找到解决方案？
谢谢！
Erik
Barbolo在底部的回答就是你要找的，自动调整大小已经被弃用并替换为自动增长，这为我解决了同样的问题。 - scott
7个回答
15

在 </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">之前并解决了这个问题。

3

进一步阐述已经指出的几点：

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;
}
1
你的建议让我解决了Firefox的问题，谢谢。 - alex
overflow:hidden 帮助解决了我的小问题，而 setAutoGrow() 无法修复。 - Scott C
2

鲁兹别的回答是正确的。然而，他的代码很可能会产生一个错误（至少在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>

Official documentation available here.

抱歉，我看不出有什么区别...这个怎么是新的，上面那个怎么是旧的？ - Will Hancock
2

FB.Canvas.setAutoResize将被弃用，您应该使用FB.Canvas.setAutoGrow，因为它可以完全满足您的需求。

抱歉打扰一下，但我无法让它在Firefox中工作？Chrome和IE都会自动调整画布大小。有什么建议吗？ - alex
你应该确保在文档加载后调用此函数。仅在 Facebook 脚本初始化后调用它是不够的。 - barbolo
@barbolo不正确。这个函数设置时间间隔，因此第一次调用它并没有什么区别。然而，这个函数确实存在漏洞，经常失败，特别是在FF9中。 - Gajus
@Guy，这实际上是有区别的。如果你在 iframe 初始化之后调用该函数，它就会起作用。 - barbolo
@barbolo 好的，那么恭喜你发现了一个 bug。：） - Gajus
0

嗯...自动调整大小有点问题，有时候只能偶尔起作用

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

1
如果你的应用程序中使用了jQuery :-) - SamiSalami
0
如果有人仍然遇到这个问题，那是因为你的FB.init()从未被调用。在我的情况下，我把它放在了jQuery的document.ready函数中。千万不要这样做！
把这个放在你的jQuery之外：
$(function() { ... jquery here... });

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

自动调整大小不起作用。这是 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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接