Facebook Canvas應用程序（Iframed）自動調整大小

最近在使用Facebook canvas iframe應用程序時遇到問題。我已將我們的設置設置爲「自動調整大小」，並實施了正確的FB JS調用來調整高度的大小（以避免不必要的滾動條），但它似乎不起作用。Facebook Canvas應用程序（Iframed）自動調整大小

有沒有其他人有這個問題或想出一個解決方案？

謝謝！

Erik

來源

2010-10-20 Erik Smith

Barbolo的回答底部是你正在尋找，自動調整一個已經貶值並帶有自動更換增長，即固定同樣的問題對我來說。 – scott 2012-10-09 08:34:44

自動調整大小不起作用。這是Facebook尚未修復的一個主要bug。

然而，這裏的工作代碼爲周圍的問題：

<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>

來源

2011-01-11 23:13:13 Roozbeh15

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>

可用here正式文件。

來源

2011-01-17 17:41:26 Kon

對不起，看不到那裏的區別...這是新的還是舊的？ – 2012-05-23 12:32:47

嗯......自動調整大小是越野車，只有工作有時

您可以手動設置它像這樣： FB.Canvas.setSize（{身高：$（「身體」）的高度（）} ）;

來源

2011-04-19 22:44:59

如果在您的應用程序中使用jQuery :-) – SamiSalami 2012-08-06 14:12:28

FB.Canvas.setAutoResize將被棄用，您應該使用FB.Canvas.setAutoGrow，因爲它確實如您所願。

來源

2011-09-30 18:28:21 barbolo

抱歉打斷，但我不明白它在Firefox中工作？ Chrome和IE都會自動增加畫布。有什麼建議麼？ – alex 2011-12-22 09:34:48

您應確保在文檔加載後調用此函數。在Facebook腳本初始化後調用它是不夠的。 – barbolo 2011-12-23 00:36:26

@barbolo不正確。這個函數設定的時間間隔，因此，當你第一次調用它時並沒有真正的區別。然而，這個函數*很糟糕，經常失敗，特別是在FF9中。 – Gajus 2012-01-17 13:55:42

擴展在幾個百分點已經指出：

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; 
}

來源

2011-09-30 20:15:51

你的建議幫助我了很多與Firefox的問題，tx – alex 2011-12-22 10:07:47

溢出：隱藏幫助我未解決的小問題setAutoGrow（） – 2012-12-04 22:33:56

之前</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">之前，並解決了問題。

來源

2012-02-23 07:29:07 gautamlakum

+1謝謝我工作 – Joshc 2012-04-25 22:30:43

這仍然是今天工作！ – jsims281 2012-08-15 15:41:11

仍適用於我。試用safari和firefox！ – 2012-09-25 16:50:37

如果有人仍然有這個問題，它的原因是你的FB.init()永遠不會被調用。在我的情況下，我把它放在我的jQuery document.ready函數中。不要這樣做！

把這個之外您的jQuery：

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

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

來源

2013-03-14 17:02:59 wesbos

Facebook Canvas應用程序（Iframed）自動調整大小

回答

相關問題