javascript - FB.Canvas.setAutoGrow() 不工作并创建高度变化的无限循环

Question

我无法让 FB.Canvas.setAutoGrow() 工作。或者，它可能在工作，但没有按照我的预期进行？

我已尝试根据 .setAutoGrow() 上的 Facebook 文档将我的 Facebook 应用程序 Canvas 高度设置为固定并关闭固定 Canvas 高度。我查看了很多关于此问题的帖子和解决方案，包括尝试此线程中的所有解决方案 Facebook Canvas APP (Iframed) Auto-Height Resize .我还在 Facebook 博客上尝试了解决方案:https://developers.facebook.com/blog/post/549/ .我目前正在尝试这个网站的建议 http://atomiku.com/2012/02/remove-scrollbars-and-get-your-facebook-app-canvas-iframe-to-autosize-to-height-fb-canvas-setautogrow/#comment-31741这似乎让我觉得更“理论上正确”的感觉，唱 onload() --- 我认为只发生一次。

我有:我的 Facebook 应用程序基本上只是重定向到带有母版页的 asp.net 页面，该页面没有什么特别的(普通网站)，只是它是动态创建的，因此每个页面的高度都会随着页面的不同而变化。它在没有 fb.canvas.setautogrow() 的情况下工作正常，但在每个页面的高度上都有滚动条。这使它出现在一个框架中。但是，如果我使用 {overflow:hidden;} 删除滚动条，则页面将被 chop 。滚动条被删除，如果页面很小，它看起来很好。一旦你到达一个比默认的 800px 长的页面，它就会 chop 它。我 body 的样式设置为 height: 100%;.

我的代码:这是我的代码，导致 Facebook 中的高度无限调整。你真的可以滚动到 Facebook 的底部，页面在无限循环中变得越来越长。

    <div id="fb-root"></div>
    <script src="https://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript">
     window.fbAsyncInit = function () {
         FB.init({
             appId: '1234', //Your facebook APP here
             cookie: true // enable cookies to allow the server to access the session
         });
     }

     window.onload = function () {
         FB.Canvas.setAutoGrow(91);
     }
    </script>

如果这是一个“显而易见”的问题，或者答案就在那里但我找不到，我提前道歉。在这一点上我已经搜索了两天。

在此先感谢您的帮助。

{编辑:好的，这个问题似乎只发生在 IE 中。起初我没有意识到这一点。我正在使用 IE 11。

Answer 1

正确的代码:

window.fbAsyncInit = function () {
    FB.init({
        appId: '1234', //Your facebook APP here
        cookie: true // enable cookies to allow the server to access the session
    });

    FB.Canvas.setAutoGrow();
}

您需要在初始化 JavaScript SDK 后调用 FB 函数。 setAutoGrow 也不需要参数，我认为默认值为 100 毫秒(因此它每 100 毫秒检查一次高度变化)。

此外，始终使用异步版本，就像这里解释的那样:https://developers.facebook.com/docs/javascript/quickstart/v2.0

不过我不认为这会解决您的循环问题。如果您的内容一直变大，则可能存在 CSS 问题。也许高度设置为 100%？我曾经遇到过这个问题。

另一个问题可能是重定向，删除重定向并尝试在您在页面选项卡设置中设置的 URL 上使用它(使用正确的代码)。

编辑:所以我对 100% 高度的猜测确实解决了第一个问题，现在您可以检查内容是否放置在 position:absolute 中。如果您只使用具有绝对位置的内容，Facebook 不会增加高度。