Question

Firefox正在向画布添加滚动条，即使将body设置为overflow：hidden并执行FB.Canvas.setAutoResize（）;.每个其他浏览器都会隐藏滚动条。当我从页面中删除所有内容时，滚动条仍然存在。

示例：https://apps.facebook.com/fbtestapppb/

Answer 1

随着Facebook时间轴的推出，删除滚动条和控制页面边距的方式已经改变。首先（最重要的是）你的身体填充和边距必须都设置为零。这可确保所有浏览器处理绝对零度的画布设置。

取决于“页面标签宽度”＆＃39;您在应用/页面设置中设置的（520px或810px）选项，您需要在以下代码中调整宽度。该块应放在Head：

页面中

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

在Body标签下方添加以下代码：

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
window.fbAsyncInit = function() {
  FB.Canvas.setSize({ width: 520, height: 1000 });
}
</script>

请务必更改您的APP ID＆＃39;。宽度：应等于520或810.设置高度：略大于允许溢出所需的值。

此解决方案已在IE，FF，Safari和Chrome中测试过！

Answer 2

我将此添加到我的CSS中，似乎有效：

body {
    margin-top: -20px;
    padding-top: 20px;
}

如果你已经在身体顶部添加了填充物，则可能需要添加20px。

我认为这是因为firefox以不同于其他浏览器的方式测量身高。

在ff8，chrome16和ie9中测试，没有任何负面影响。

Answer 3

我用这种方式解决了这个问题：

  (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)); 

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

       var height_doc = $(document).height()+20; 
       FB.Canvas.setSize({height: height_doc});
  };

这对我有用。我希望能有所帮助。

Answer 4

这是画布应用和页面标签的一个已知问题，并且已经烦恼地存在了很长一段时间。

https://developers.facebook.com/bugs/309917422436936

有些人提到能够使用FB.Canvas.setSize({ width: 700, height: 800 });或类似FB.Canvas.setAutoResize(500);之类的内容，而且可以解决问题。

您是否确实在应用控制面板中设置了iframe自动调整大小选项？

Answer 5

忘记身体和html边距（我的意思是将它们设置为零）只需将所有内容（包括页眉和页脚）放入带有单个单元格的表格中即可至少所有浏览器都会同意如何计算表格的高度......

像这样：

 <table id='m_table' width=100% align=left border=0 cellspacing=0 cellpadding=0>
    <tr><td valign=top bgcolor=white align=center style='position:relative;'>

并执行此操作：

setTimeout(function() {FB.Canvas.setSize({height:(document.getElementById('m_table').offsetHeight+40)})}, 1000);

适用于IE，FireFox和Chrome / Safari ......

如果需要，可以使用FB初始化代码：

window.fbAsyncInit = function() {
      FB.init({appId:'your_app_id',status:true,cookie:true,xfbml:true});fbApiInit = true;
      }

 function fbEnsureInit(callback)
  {
    if(!window.fbApiInit) setTimeout(function() {fbEnsureInit(callback);}, 50);
        else if(callback) callback();
  }
 fbEnsureInit(function() {
    FB.Canvas.scrollTo(0,0);
    var h = document.getElementById('m_table').offsetHeight+40;
   // console.log('setting size to '+h);
    FB.Canvas.setSize({height:h});
     setTimeout(function() {FB.Canvas.setSize({height:(document.getElementById('m_table').offsetHeight+40)})}, 1000);
  });

如何在Firefox上从画布中删除滚动条

5 个答案: