基于iframe的Facebook应用程序获得不需要的窗口大小的滚动条 [英] iframe-based facebook app gets unwanted scroll bars with a smaller windows size
问题描述
我有这个Facebook应用程序资料页面：
I have this Facebook application profile page:
与我的基于iframe的Facebook应用程序相关联，Gem Spinner：
which is associated with my iframe-based Facebook application, Gem Spinner:
http://apps.facebook.com/gemspinner/
我所看到的是，根据窗口高度，我的iframed内容将以固定高度和滚动条显示，而不是仅仅向下流动页面（并根据需要从页面底部开始） ，正如我想的那样。当我缩短窗口时，会出现滚动条;当我让窗户更高时，滚动条消失。我的理解是，它是Facebook确定这个高度并添加滚动条（但也许我错了）。在任何情况下，我都非常感谢您理解这一点，并在必要时让我的内容在页面中流动。
What I'm seeing is that, depending on the window height, my iframed content will appear with a fixed height and a scroll bar, instead of just flowing down the page (and off the bottom of the page, as necessary), as I would like. When I make the window shorter, the scroll bar appears; when I make the window taller, the scroll bar disappears. My understanding is that it's Facebook determining this height and adding the scroll bar (but maybe I'm wrong about that). In any case, I would appreciate any help in understanding this and letting my content flow down the page as necessary.
推荐答案
嗯，我做了一些事情让它工作。
Well, I did a few things to get it to work.
（1）在我的应用程序设置中，在Facebook Integration选项卡下，在IFrame大小下，我选择了自动调整大小显示滚动条。
(1) In my application settings, under the Facebook Integration tab, under IFrame size, I chose Auto-resize instead of Show scrollbars.
（2）我加载了Facebook连接API（参见下面的代码）。
(2) I loaded the Facebook connect API (see code below).
（ 3）我在两个不同的地方调用了FB.Canvas.setAutoResize（100）。我称它为两次，因为我不清楚哪个位置会使它更快地生效。在早期测试中，我看到iframe高度开始短（可能是800像素高），然后增长到我的内容的全尺寸（可能是1100像素高）。在随后的测试中，iframe会立即调整大小，所以我看不到这两种状态。所以我对这里的时机/机制并不完全清楚。
(3) I called FB.Canvas.setAutoResize( 100 ) in two different places. I call it twice because it wasn't clear to me which location would make it take effect more quickly. In early testing, I was seeing the iframe height start out short (maybe 800 pixels tall) and then grow to the full size of my content (maybe 1100 pixels tall). In subsequent tests the iframe resizes immediately so I don't see the two states. So I'm not totally clear on the timing/mechanism here.
<body>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
FB.init({
appId : 'your app id here',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : false // parse XFBML
});
FB.Canvas.setAutoResize( 100 );
</script>
... the rest of the page body goes here ...
<script type="text/javascript">
FB.Canvas.setAutoResize( 100 );
</script>
</body>
这篇关于基于iframe的Facebook应用程序获得不需要的窗口大小的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
