调整应用程序 iframe 的大小以摆脱 Firefox 中的所有滚动条答案

【问题标题】：Resizing app iframe to get rid of all scrollbars in firefox调整应用程序 iframe 的大小以摆脱 Firefox 中的所有滚动条
【发布时间】：2012-01-31 16:48:02
【问题描述】：

我制作了一个应用程序，它将成为一个 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;
}

【问题讨论】：

标签： facebook firefox facebook-javascript-sdk facebook-iframe facebook-apps

【解决方案1】：

我在将滚动条添加到我的 Facebook 页面/标签时遇到了同样的问题。最后的修复是......

在应用设置中，确保您设置了“页面标签”和“Facebook 上的应用”以及页面标签/画布 URL 和安全版本。
代码：

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

祝你好运！

【讨论】：

这对我来说非常有效，虽然不需要 channelUrl - 以前从未听说过！
channelUrl 是可选的，但可以很好地解决跨浏览器通信等某些问题。除非我需要它，否则我不会使用它。

【解决方案2】：

如下制作一个函数：

function grow()
  {

    FB.Canvas.setAutoGrow();

     }

在body onload事件中调用这个函数为<body onLoad="grow()">

希望它有效，干杯。

【讨论】：

【解决方案3】：

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

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

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

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 函数。将代码移到外部后，独立于其他功能，一切正常。

【讨论】：

【解决方案4】：

对我来说，仅将 overflow-x 设置为隐藏通常会有所帮助。这不应该在帮助解决 Firefox 大小计算中的一些怪癖时切断内容。

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

【讨论】：

with overflow-x: hidden 水平滚动条消失但垂直滚动条仍然存在。如何摆脱它？
如果垂直滚动条没有消失 - 你确定 setAutoGrow 工作正常吗？如果无法访问前端（Javascript 错误控制台等），这很难调试。你试过缩小范围吗？例如，制作一个测试页面，其中正文只包含一个高度为 900 像素等的 div？
好像这个 AutoGrow 功能不起作用...我尝试增加高度...画布大小保持不变...额外内容仅通过滚动条可见
setAutoGrow-line 是否被执行（firebug 中的断点）？控制台中是否有任何警告/错误？
在firefox这些功能没有输入？调试器永远不会在函数中获得？知道为什么吗？