Question

我制作了一个应用程序，它将是一个FB页面选项卡。现在我试图摆脱内容超过800px高度时出现的滚动条。我使用以下代码执行此操作：

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({
        appId : '<?php echo $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.setAutoGrow();
    }
    // Do things that will sometimes call sizeChangeCallback()
    function sizeChangeCallback() {
        FB.Canvas.setSize(); 
    }
</script>

现在这适用于Google Chrome，但会显示firefox的滚动条。事实上，最初没有水平滚动条现在出现了。在一些博客上写道，为了摆脱这个错误，我们应该将溢出设置为隐藏。我也试过这样做，但内容的削减。这是什么解决方案？这是我的html和body的CSS：

html {
    border: 1px solid #cccccc;
    min-height: 798px;
    font-size: 12px;
    overflow: hidden;
}
body {
    width: 495px;
    overflow: hidden;
font-size: 12px;
background-color: #f7f7f7;
color: #444444;
font-family: lucida grande, tahoma, verdana, arial, sans-serif;
}

Answer 1

我一直有同样的问题，Firefox将滚动条添加到我的Facebook页面/标签。最后的修复是......

在应用设置中，请确保使用页面标签/画布网址和安全版本设置了“页面标签”和“Facebook上的应用”。
代码：

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'FB_APP_ID', // App ID
      channelUrl : 'FB_CHANNEL_URL', // 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
    FB.Canvas.setAutoGrow();
  };

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

Answer 2

制作如下一项功能：

function grow()
  {

    FB.Canvas.setAutoGrow();

     }

在body onload事件上调用此函数为<body onLoad="grow()">

希望它有效，干杯。

Answer 3

我也遇到过这个问题，经过几个小时的网络阅读后，我终于找到了一个有效的解决方案。如果您已在标记中包含此div：

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

只需在文件末尾添加此脚本（在关闭body标签之前）：

window.fbAsyncInit = function () {
    FB.init({
        appId:'APP ID',
        status:true,
        cookie:true,
        xfbml:true
    });
FB.Canvas.setAutoGrow();
};

(function (d, debug) {
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" + (debug ? "/debug" : "") + ".js";
    ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));

我的问题是，在Chrome，Safari甚至IE上工作，它仍然在Firefox和Opera中失败。问题是上面的代码是在 $（document）.ready（）函数内编写的，因此Firefox和Opera从未激发 fbAsyncInit 函数。将代码移到外面后，独立于其他功能，一切都运行良好。

Answer 4

对我而言，通常只将overflow-x设置为隐藏。这不应该在帮助克服Firefox的大小计算中的一些怪癖时切断内容。

编辑：问题在于执行顺序。 Facebook-SDK首先执行。它检查是否存在window.fbAsyncInit - 此时未定义。稍后定义fbAsyncInit但Facebook从不再次检查，因此该函数不会被执行。所以setAutoGrow没有执行，整个魔法都没有发生。在包含FB SDK之前将fbAsyncInit的定义移动到某个点应该可以解决问题。

调整应用iframe的大小以摆脱firefox中的所有滚动条

4 个答案: