Facebook Canvas APP(Iframed)Auto-Height Resize

Question

最近使用Facebook canvas iframe应用程序遇到了问题.我已将我们的设置设置为"自动调整大小"并实现了正确的FB JS调用以调整高度(以避免不需要的滚动条),但它似乎不起作用.

有没有其他人有这个问题或提出解决方案？

谢谢!

埃里克

Answer 1

在</body>标记之前,我编写了以下代码.

<div id="fb-root"></div>
<script type="text/javascript">
            window.fbAsyncInit = function() {
                FB.init({
                    appId: '<?php echo YOUR_APP_ID ?>',
                    cookie: true,
                    xfbml: true,
                    oauth: true
                });
                FB.Canvas.setAutoGrow(true);
            };
            (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>

它对我来说很好.

这不要紧,无论height是Fixed or Fluid在高级应用程序设置.

FB.Canvas.setAutoGrow(true);我的应用程序没有工作,但我发现我错过了<div id="fb-root"></div>代码.我刚才提出<script type="text/javascript">并解决了问题.

Answer 2

自动调整大小不起作用。这是 Facebook 尚未修复的重大错误。

但是，这里是解决该问题的代码：

<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
    };
    (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
    </script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<div id='FB_HiddenContainer' style='display:none;position:absolute;left:-100px;top:-100px;width:0;height:0'>
</div>
<script type="text/javascript">
  window.onload = function(){
    FB_RequireFeatures(['CanvasUtil'], function(){
      FB.CanvasClient.setCanvasHeight('1500px');
    });
  };
</script>