Question

我想在页面加载时自动调整Facebook应用高度和页面标签高度，但它不起作用。

我确信有一些简单的我做错了，但我无法识别它。

以下是我正在使用的简化代码：（++++表示剪切代码）

<!DOCTYPE ++++ >
<html>
 <head>++++</head>
 <body>
  <div id="container">++++</div>
  <div id="fb-root"></div>
  <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
  <script type="text/javascript">
   FB.init({appId: '++++', status: true, cookie: true, xfbml: true });
   FB.Canvas.setSize();
  </script>
 </body>
</html>

提前致谢！

更新：

在Settings，Advanced，Canvas Settings，Canvas Height下，我检查了fixed选项。（据我所知，不再有Settable选项，可能已经重命名了。）

当我调用该方法时，我的应用程序已完全加载。

通过一些调查，我可以看到应用程序高度和页面标签高度开始变为正确的大小，然后几乎立即增加到1200px的高度。（我的fixed height设置为600px。

更新：在iframe代码中，它显示以下内容：<iframe src="++ommited++?signed_request=++ommited++" frameborder="0" scrolling="AUTO" style="width:810px; height:1200px;padding:0px; margin:0px" marginheight="0px" marginwidth="0px"></iframe>。正如你所看到的那样height:1200px;似乎是问题所在。

更新：应用默认为我的应用设置中设置的尺寸，然后立即调整为1200px。即使我删除了用于更改应用和页面标签高度的Facebook代码，也会发生这种情况。

有什么建议吗？感谢

Answer 1

您必须检查Canvas是否加载了FB.Canvas.setDoneLoading()

FB.Canvas.setDoneLoading( function(response) {
    console.log(response.time_delta_ms);
    FB.Canvas.setAutoGrow();
});

FB文档：https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setDoneLoading/

Answer 2

我遇到过这种类型的问题，要在FB页面中调整页面选项卡的大小。在我的情况下，我在我的网站页面中进行了以下更改，我希望在我的FB页面上显示该标签：

<html>
<head>
    <script type="text/javascript">
        window.fbAsyncInit = function()
        {
            FB.Canvas.setSize();
        }
    </script>
</head>

<body>
    ......
    ......
    ......
    <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
    <script type="text/javascript">
        FB.init({
        appId: 'Your_App_Id', 
        status: true, 
        cookie: true, 
        xfbml: true
        });
        FB.Canvas.setAutoGrow();
    </script>
</body>
</html>

希望它可以帮到你。

Answer 3

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame {
    zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}
</style>

Answer 4

首先，请确保您的应用设置中的画布高度设置为“可设置（默认值：800px）”，否则

然后，您的应用程序是否已通过调用方法的点完全加载（关于可能影响页面高度的所有图像，CSS等）？

否则，您可以尝试FB.Canvas.setAutoGrow - 定期检查页面的高度并调整iframe高度。

需要帮助Facebook应用程序和页面选项卡高度使用FB.Canvas.setSize调整大小

4 个答案: