Facebook标签高度自动调整大小答案

【问题标题】：Facebook Tab height auto resizeFacebook标签高度自动调整大小
【发布时间】：2013-03-07 22:35:01
【问题描述】：

我创建了包含 3 个 div 块的 Facebook 标签，但高度太大，而且我有一个滚动条。这就是为什么我将“溢出：隐藏”CSS 与正文 html 放在一起。它不起作用。所以我在网上找到了一件好事：

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'MY_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

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

这仅适用于 Firefox 和 Safari，但在 Chrome 和 IE 上我没有滚动条，但如果我想进入标签底部，我必须左键单击才能滚动并查看底部。我如何在 Chrome 和 IE 上调整这个东西？你认为我的 CSS id 不好？

【问题讨论】：

标签： facebook tabs facebook-apps

【解决方案1】：

查看此内容：https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/ 并查看左列底部的其他 Canvas 方法链接。

自从我更新自己的应用程序大小调整代码以来已经有几个月了，而且这些东西一直在变化，但以下内容对我来说是工作的，就在你页面的结束标记之前。我记不太清了，但你可能还需要 style="overflow:hidden" 在你的开始正文标签中。

希望这会有所帮助:)

<script type="text/javascript" language="javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" language="javascript">
    FB.init({
        appId: '<YOUR_APP_ID>',
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true// parse XFBML
    });
    window.fbAsyncInit = function () {
        FB.Canvas.setSize();
    }

    FB.Canvas.setAutoGrow(7);
</script>

我也为你找到了这个：http://petetasker.wordpress.com/2012/10/31/facebook-set-auto-grow-a-version-that-actually-works/

【讨论】：

【解决方案2】：

<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>

<script type="text/javascript">
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'YOUR_APP_ID'
      });
      FB.Canvas.setAutoGrow();
    }
</script>

【讨论】：

【解决方案3】：

在调用 FB JS 时，确保它不是绝对的。根据查看器的 SSL 设置，它可能会引发错误并且自动调整大小将不起作用。错误：

<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>

右：

<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>

【讨论】：

【解决方案4】：

使用 setAutoGrow() 的答案都不适合我，所以我必须使用 JavaScript 计算内容高度，然后相应地使用 setSize()。

window.fbAsyncInit = function() {

    FB.init({
        appId      : 1234567890,
        xfbml      : true,
        version    : 'v2.3'
    });

    // Find the container that spans your entire content
    var contentWrapper = document.getElementById("content-wrapper");

    // Calculate element height using different methods because some browsers might calculate the height differently, then choose the highest
    var contentHeight = Math.max(wrapper.scrollHeight, wrapper.offsetHeight, wrapper.clientHeight);

    // Set canvas size
    FB.Canvas.setSize({ width: 810, height: contentHeight});

};

【讨论】：