Question

我已经完成了我的facebbok应用程序，目前在将应用程序视为Facebook应用程序选项卡时卡住了....：显示垂直滚动条。实际上我已经使用以下代码自动调整应用程序iframe的大小：

window.fbAsyncInit = function() {
    FB.init({appId: FBAPP_ID, status: true, cookie: true, xfbml: true});
    FB.Canvas.setAutoResize(100);
    //FB.Canvas.setSize();
  };
  (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);
  }());

加载应用程序选项卡时，iframe成功调整大小，但垂直滚动条可见。我的应用正文的宽度为520px，应用程序设置设置为自动调整大小和iframe模式。当我添加overflow：hidden到html-element时，滚动条不可见 - 但我不想使用overflow：隐藏在html-tag上，因为该页面也可以作为独立页面使用。

当内容符合iframe高度时，有没有人知道如何让Facebook隐藏垂直滚动条？（或者这是目前的Facebook问题（......再次）？

提前致谢丹尼斯

Answer 1

在这里尝试了所有解决方案之后，最后一个在Firefox中产生差异的是为添加overflow: hidden <html>和<body>样式。

CSS代码如下：

html {
    overflow: hidden;
}

body {
    width: 520px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

除非你设置<body scroll="no">，IE7有时也会显示滚动条，所以请记住。

Answer 2

自从引入iframe标签以来，此功能一直存在问题。错误跟踪器包含大量相关报告。基本上，我们的经验是完全不可靠。有时它可以像宣传的那样工作，有时它只适用于某些浏览器，有时它的工作方式取决于你加载JavaScript SDK的方式，有时一种方法有效，另一种方法无效，有时根本不起作用。

Answer 3

这是我使用的代码适用于我

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

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

Answer 4

转到您的应用设置 - ＆gt; Facebook集成并选择“IFrame Size”=自动调整大小

Answer 5

请确保您为body元素设置overflow：hidden样式规则。其他情况下firefox有时会决定显示滚动条。

Answer 6

实际上FB.Canvas.setAutoResize（）现在称为FB.Canvas.setAutoGrow（）; 它每100毫秒刷新一次 Facebook docs

所以代码看起来应该更像是atm

<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
         appId  : '666',//your app id
         status : true,
         cookie : true,
         xfbml  : true
     });
FB.Canvas.setAutoGrow();
</script>

Facebook：如何删除应用程序选项卡中的iFrame垂直滚动条

6 个答案: