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

Need help Facebook App and Page Tab height resizing using FB.Canvas.setSize

本文关键字：调整 FB 布设置 设置 应用程序 Facebook 帮助 高度 选项      更新时间：2023-09-26

我想在页面加载时自动调整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 代码，也会发生这种情况。

有什么建议吗？谢谢

您必须检查 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/

我在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>

希望对您有所帮助。

<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>

首先，请确保在应用设置中将画布高度设置为"可设置（默认：800px）"，否则它不应该工作。

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

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

相关文章：