facebook javascript SDK：FB.Canvas.setAutoResize iFrame 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3024525/
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 javascript SDK: FB.Canvas.setAutoResize iFrame not working?
提问by z3cko
we built a facebook application with ruby/rails and facebooker (iframe application) and are currently stuck with the FB.Canvas.setAutoResize which seems to fail in some cases. using the example from facebook developer docs ( see http://developers.facebook.com/docs/reference/javascript/). the autoresize fails once you enter a page which is higher than 800px - so to say, it just works as long as the canvas gets bigger, not when it gets smaller. anyone has a clue or maybe a workaround?
我们使用 ruby/rails 和 facebooker（iframe 应用程序）构建了一个 facebook 应用程序，目前被困在 FB.Canvas.setAutoResize 上，这在某些情况下似乎会失败。使用 facebook 开发人员文档中的示例（请参阅http://developers.facebook.com/docs/reference/javascript/）。一旦您进入高于 800 像素的页面，自动调整大小就会失败 - 可以说，只要画布变大，它就会起作用，而不会在画布变小时时起作用。任何人都有线索或解决方法？
here is the resizing code piece
这是调整大小的代码段
<div id="fb-root" style="width:1px;height:1px;position:absolute;"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '126342024064822', status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize(true,100);
};
(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);
}());
</script>
i am very thankful for any comments or hints, since i am twisting my head around this one for more than a day now.
我非常感谢您的任何评论或提示，因为我现在已经超过一天了。
回答by Brett Pontarelli
Some key things to make sure are set in the application settings:
在应用程序设置中设置了一些要确保的关键事项：
- Canvas Settings -> Render Method = iFrame
- Canvas Settings -> iFrame Size = Resizable
- Migrations -> new SDK = Enabled
- 画布设置 -> 渲染方法 = iFrame
- 画布设置 -> iFrame 大小 = 可调整大小
- 迁移 -> 新 SDK = 已启用
Next adjust your code by adding a timeout (250 seems to work best, but you may want to experiment futther). I've tested this in FF3.6 and IE7+. In IE there is a momentary flash of the vertical scrollbar which I'm still trying to fix.
接下来通过添加超时来调整您的代码（250 似乎效果最好，但您可能需要进一步试验）。我已经在 FF3.6 和 IE7+ 中对此进行了测试。在 IE 中，我仍在尝试修复垂直滚动条的瞬间闪烁。
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '12345678910', status: true, cookie: true, xfbml: true});
window.setTimeout(function() {
FB.Canvas.setAutoResize();
}, 250);
};
(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);
}());
</script>
回答by juan
the solution is easy!
besides putting FB.Canvas.setAutoResize()
you have to change ur body to body style="overflow:hidden"
解决办法很简单！除了放置 FB.Canvas.setAutoResize() 之外，
您还必须将您的身体更改为 body style="overflow:hidden"
it works for me! now ie8 is ok!!
这个对我有用！现在ie8好了！！
回答by bryon
I'd also like to point out, that you do indeed need your
我还想指出，你确实需要你的
<div id="fb-root">
for this to work.
为了这个工作。
