javascript Facebook：如何在应用程序选项卡中删除 iFrame 的垂直滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5299403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Facebook: Howto remove vertical scrollbar of iFrame in Application Tab
提问by Denis
I've finished up my facebbok App and currently got stuck when watching the application as an facebook application tab....: the vertical scrollbar is displayed. Actually I've used the following code to auto resize the application iframe:
我已经完成了我的 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);
}());The iframe successfully gets resized when I load the application tab, but the vertical scrollbar is visible. The body of my app has a width of 520px, the application settings are set to auto-size and iframe-mode. When I add overflow:hidden to the html-element the scrollbar is not visible - but I dont want to use overflow:hidden on the html-tag because the page is also be available as standalone-page.
当我加载应用程序选项卡时，iframe 成功调整大小，但垂直滚动条可见。我的应用程序的主体宽度为 520 像素，应用程序设置设置为自动调整大小和 iframe 模式。当我将溢出：隐藏添加到 html 元素时，滚动条不可见 - 但我不想在 html 标签上使用溢出：隐藏，因为该页面也可以作为独立页面使用。
Does anybody has some ideas how to get facebook to hide the vertical scrollbar when the content fits the iframe height? (or is this currently a facebook problem (...again) ?
当内容适合 iframe 高度时，有人知道如何让 facebook 隐藏垂直滚动条吗？（或者这是目前 facebook 的问题（...再次）？
Thanks in advance Denis
提前致谢 丹尼斯
回答by Chris Nolet
After trying all of the solutions here, the final one which made the difference in Firefox was adding overflow: hiddenfor boththe <html>and <body>styles.
尝试所有的解决方案在此之后，这使得在Firefox的差别最后一个是添加overflow: hidden了这两种的<html>和<body>样式。
CSS code as follows:
CSS代码如下：
html {
overflow: hidden;
}
body {
width: 520px;
margin: 0;
padding: 0;
overflow-x: hidden;
}
IE7 also sometimes shows scroll bars unless you set <body scroll="no">so keep that in mind also.
IE7 有时也会显示滚动条，除非您进行设置，<body scroll="no">因此请记住这一点。
回答by chwk
There have been issues with this feature since iframe tabs were introduced. The bug tracker contains quite a bunch of related reports. Basically, our experience is that it is completely unreliable. Sometime it works as advertised, sometimes it only works in some browsers, sometimes it works depending on the way you load the JavaScript SDK, sometimes one method works and the other doesn't, and sometimes it does not work at all.
自从引入 iframe 选项卡以来，此功能一直存在问题。错误跟踪器包含大量相关报告。基本上，我们的经验是它完全不可靠。有时它像宣传的那样工作，有时它只能在某些浏览器中工作，有时它的工作方式取决于您加载 JavaScript SDK 的方式，有时一种方法有效而另一种方法无效，有时根本不起作用。
回答by Adam Wydeman
This is the code that I use that works for me
这是我使用的对我有用的代码
<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>
回答by thkouk
Go to your App Settings -> Facebook Integration and choose "IFrame Size" = Auto-resize
转到您的应用程序设置 -> Facebook 集成并选择“IFrame 大小”= 自动调整大小
回答by Sándor Tóth
Just make sure, you put overflow:hidden style rule for body element. Other case the firefox sometime decides to show the scrollbar anyway.
只要确保你为 body 元素设置了 overflow:hidden 样式规则。其他情况下，firefox 有时会决定无论如何都要显示滚动条。
回答by Zgr3doo
Actually FB.Canvas.setAutoResize() is known now as FB.Canvas.setAutoGrow(); it refresh every 100 milliseconds Facebook docs
实际上 FB.Canvas.setAutoResize() 现在被称为 FB.Canvas.setAutoGrow(); 它每 100 毫秒刷新一次 Facebook 文档
so code should look more-less like this atm
所以代码应该看起来更像这个 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>
