Facebook IFrame 自动调整大小仍包括滚动条

Question

我已经尝试解决这个问题有一段时间了，但我没有运气。我有一个 Facebook 应用程序（witdh：510），它不断包含滚动条。这是它在 Facebook 上的样子：

我的应用程序中没有任何内容的宽度大于 510，所以我很困惑首先解释为什么会有空白。我也不明白为什么有一个垂直滚动条，因为页面上显然有足够的空间来容纳该应用程序。

在我的应用程序设置中，调用自动调整大小，并且我的 window.fbAsyncInit 函数中有 FB.Canvas.setAutoResize(); 。我还尝试使用 CSS Reset 但这并没有解决问题。

有什么建议吗？

Answer 1

如果您确定 iFrame 的尺寸将始终显示内容，那么您只需设置：

<iframe src="yourpage.htm" scrolling="no"></iframe>

scrolling="no" 将强制 iFrame 不显示滚动条，即使内容大于框架。

这应该是不显示滚动条的可靠方法，但应谨慎使用，并且您应该知道，如果内容超出了 iFrame 的范围，则内容可能最终会被隐藏，而用户没有明显的方式滚动到它。

--edit--

由于您显然无法在 Facebook 上设置此设置，因此您应该简单地将正在加载的页面包装在包装器 div 中，并在那里设置高度、宽度和溢出属性。

<div class="wrap" style="height:500px;  width:510px;  overflow:hidden;">
  your page content here
</div>

您可以使用 overflow:hidden; 来表示没有滚动条，或者 overflow-x:hidden; 来仅隐藏水平滚动条，或者 overflow-y:hidden;< /em> 仅隐藏垂直滚动条。

Answer 2

首先，我会使用“firebug”之类的内容检查我的 iframe HTML，检查所有 div 并验证 firebug 左侧的“布局”选项卡。您将看到元素的大小、边框、填充边距等，检查一切是否正确。

现在我有时遇到的情况是，facebook 的“自动调整大小”在某些浏览器上无法正常工作，因此它会错误计算高度，并且您的右侧仍然有一个滚动条，因此由于这个滚动条，您的内容变得太大，你还会得到一个水平滚动条。

我的解决方案是自己指定 iframe 的高度，而不是使用自动调整大小的东西，这里是执行此操作的代码（放在页面末尾的结束 之前） ) :

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {

    FB.init({appId: '{{fbapp_id}}', status: true, cookie: true,xfbml: true});

    window.setTimeout(function() {
        FB.Canvas.setSize({height:900});
    }, 250);

  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

这里我选择的高度是“900”，但你必须设置自己的高度（iframe 内容的高度 + 一些安全边距，如 50px 左右）

此外，你还必须替换 {{fbapp_id}} 通过您真实的 Facebook 应用程序 ID。

我希望这有帮助。

Answer 3

首先，删除填充和通过 css 与正文的边距

body {
 padding:0;
 margin:0;
}

将内容放在 div 中，将宽度设置为 520（如果仍然出现滚动条，则溢出：隐藏）。请注意此 DIV 上的填充和边框（请参阅 http://www.w3.org/ TR/CSS2/box.html 了解详细信息）

当您的内容很长时，设置此 div 的最小高度也很有帮助。有时你会得到垂直滚动条，这又会导致水平滚动条。

在页面的末尾，在关闭正文之前设置一个

FB.Canvas.setSize()

还要确保在您的应用程序设置中您有“自动高度”（或其调用方式）而不是滚动条。