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

Question

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

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

Answer 1

随着 Facebook 时间轴的引入，移除滚动条和控制页边距的方式发生了变化。首先（也是最重要的）你的 body padding 和 margin 必须全部设置为零。这可确保所有浏览器处理您的画布设置绝对为零。

根据您在应用程序/页面设置中设置的“页面标签宽度”（520 像素或 810 像素）选项，您需要在以下代码中调整宽度。这个块应该放在页面头部：

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

记得更改“您的应用 ID”。宽度：应等于 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);
  });