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

已經注意到幾點上的擴展：

window.fbAsyncInit = function () {
        FB.init({ 
           appId: 'YOUR APP ID', 
           status: true, 
           cookie: true, 
           xfbml: true, 
           oauth: true 
        });
        FB.Canvas.setAutoGrow(true);
    };

這將允許應用程序高度的動態更改。 另外在css中設置顯式寬度也可以提供幫助：

html {
   width: 760px;
   overflow: hidden;
}

Answer 3

Roozbeh的回答是正確的。 但是，他的代碼很可能會產生錯誤（至少在Firefox中），因為舊的和新的SDK都被引用（並且它們彼此不能很好地發揮作用）。

此外，只使用新的SDK來調整高度非常簡單：

<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function () {
        FB.init({ appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true });
        FB.Canvas.setSize({ height: 890 });
    };
    (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>

這里有官方文件。

Answer 4

FB.Canvas.setAutoResize將被棄用，您應該使用FB.Canvas.setAutoGrow，因為它完全符合您的要求。

Answer 5

如果有人仍然遇到這個問題，那是因為你的FB.init()永遠不會被調用。 就我而言，我把它放在我的jQuery document.ready函數中。 不要那樣做！

把它放在你的jQuery之外：

$(function() { ... jquery here... });

// do FB stuff
FB.init({appId: 'APP_ID', status: true, cookie: true });
FB.Canvas.setAutoGrow();

Answer 6

自動調整大小不起作用。 這是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>

Answer 7

嗯...自動調整大小是錯誤的，有時只能工作

您可以像這樣手動設置它：FB.Canvas.setSize（{height：$（'body'）。height（）}）;