如何使用 Javascript 自动调整 Facebook 标签的高度？答案

【问题标题】：How do I use Javascript to auto resize the height of my Facebook tab?如何使用 Javascript 自动调整 Facebook 标签的高度？
【发布时间】：2012-10-10 08:53:24
【问题描述】：

我正在尝试为我的页面创建一个简单的 HTML Facebook 选项卡，但我似乎找不到如何更改选项卡最大高度的解决方法。

我应该提到我是编码初学者，我知道非常基本的 HTML，但我试图避免使用 JavaScript，因为我没有任何经验。

不幸的是，如果没有 JavaScript，我似乎无法做到这一点，所以我的问题很可能是我做错了什么。

代码看起来像这样（其余的代码，包括关闭 HTML 标记位于 JavaScript 部分之后，并且工作正常）。

<!DOCTYPE html>
<html>
<body>

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '***********', // App ID
      channelUrl : '//**********', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    FB.Canvas.setAutoGrow();
</script>

我几乎从 Facebook 的开发人员页面中复制了 Javascript SDK，然后找到了一小段代码可以自动设置高度。我已经用谷歌搜索了答案，但找不到任何可以解决此问题的方法（或以像我这样的绝对新手可以理解的方式解释它）。

希望你能帮帮我。

//弗雷德里克

【问题讨论】：

标签： javascript html facebook tabs

【解决方案1】：

既然你提到你知道非常基本的 html，我假设你也不知道 CSS 的可能性，所以我建议你替换它：

<div id="fb-root"></div>

用这个：

<div id="fb-root" style="max-width: 100px;"></div>

【讨论】：

这几乎太简单了 - 为我修好了 :) 非常感谢，我已经花了好几个小时来解决这个问题。

【解决方案2】：

将此代码 FB.Canvas.setAutoGrow(); 移动到 fbAsyncInit 函数中，示例：

window.fbAsyncInit = function() {
    FB.init({
      appId      : '***********', // App ID
      channelUrl : '//**********', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    FB.Canvas.setAutoGrow();
 };

如果你想手动设置大小，你可以使用FB.Canvas.setSize()函数：

FB.Canvas.setSize({height: 800});

将上面的数字800更改为您希望它增加的任何大小。

【讨论】：