Question

我试图为我的脸书应用程序实现流畅的画布。我正在使用脚本

window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
}

在我初始化我的应用程序后，它仍然设置为800px。我该如何使用这个功能？

Answer 1

为了可能帮助其他人，请尝试从代码中删除http或https。这是我的（注意ChannelUrl线）：

    <div id="fb-root"></div>
    <script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script> 
    <script type="text/javascript">
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'YOUR_APP_ID', // App ID
        channelUrl : '//WWW.YOURURL.COM/FOLDER', // Channel File    
        status: true, 
        cookie: true, 
        xfbml: true
      });
      FB.Canvas.setAutoGrow();
    }
    </script>

删除http / https后，它适用于所有浏览器。

Answer 2

在</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 3

参考此页：

https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/

“如果你知道你的内容会改变大小，但你不知道什么时候这个功能很有用。会有一点延迟，所以如果你知道你的内容何时改变大小，你应该自己调用setSize（并保存）用户的CPU周期）。“

所以，如果你有一些增加高度的javascript函数你可以调用setSize方法，否则setAutoGrow并指定更长或更短的interva

Answer 4

Try with following.It will auto resize your iframe.

<html>
<head>
<script src="./includes/js/jquery.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">

window.fbAsyncInit = function(){
FB.init({appId: 'appid', status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize();};
function setSize(){
FB.Canvas.setAutoResize();}

</script>
</head>
<body style="overflow: hidden" onload="setSize()">

Answer 5

如果您尝试使用流体画布，则无需设置iframe的大小。实际上你不应该调用它，因为FB中有一个bug;当设置为流体时，调用iframe的大小应该什么都不做 - 事实上情况并非如此，并且调用确实得到了处理。这里有一个针对此的错误记录：http://developers.facebook.com/bugs/272509486115193但是FB认为这个优先级低（对我来说很烦恼！）

为了让流体正常工作，请查看以下文档：https://developers.facebook.com/blog/post/549

根据上面链接的文档页面上的说明，您需要确保页面上的内容容器的高度设置为100％。

setAutoGrow设置画布长度

5 个答案: