Facebook 页面的 iframe 高度答案

【问题标题】：iframe height for Facebook pageFacebook 页面的 iframe 高度
【发布时间】：2011-08-26 18:47:00
【问题描述】：

Facebook 中 iframe 页面的最大高度似乎为 800 像素。有什么办法可以改变吗？我见过一些深度超过 800 像素的页面/应用

【问题讨论】：

标签： facebook iframe

【解决方案1】：

note 提供了有关如何执行此操作的说明。将应用设置设置为自动调整大小：

如果滚动条仍然出现，则调用 FB.Canvas.setSize() 或 FB.setAutoResize() 删除滚动条。

【讨论】：

如果画布高度在页面上可变，也可以使用 Facebook-JS-SDK 并使用 FB.setAutoResize() 函数来触发调整大小。
感谢 OffBySome 和 Ashwini，您的两个建议都奏效了。我还需要添加溢出：隐藏；到我的身体标签
Facebook App的界面不同，他们没有Canvas Type选项。

【解决方案2】：

试试这个到你的 iframe 内容的结尾：

      <div id="fb-root"></div>
  <script type="text/javascript"> 
   window.fbAsyncInit = function() {

   //Der folgende Code ändert die Grösse des iFrames alle 100ms 
    FB.Canvas.setAutoResize(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>

【讨论】：

好像改了，FB.Canvas.setAutoGrow();似乎现在可以工作（2012 年 10 月）

【解决方案3】：

Andrew Smart：我能够根据页面应用的高度在此处复制您的错误。

使用我的页面应用程序@http://www.facebook.com/anotherfeed?sk=app_135669679827333

我在页面加载完成后7秒“7000ms”使用javascript计算内页高度以避免错误。在页面标签应用程序的底部，您将看到...

加载此页面需要 1.724007 秒。 W:520 x H:800，其中实际 iframe 的高度为 5704px。

<iframe name="app_runner_4e581c03cfc387e71622269" id="app_runner_4e581c03cfc387e71622269" style="width: 520px; height: 5704px; " frameborder="0" src="http://static.ak.facebook.com/platform/page_proxy.php?v=4#app_runner_4e581c03cfc387e71622269"></iframe>

无论页面多长，页面似乎都会返回 800px 作为高度，我认为这是 page_proxy.php 中的错误，并且可能值得将错误提交给 bugzilla。

我用于页面高度的代码：

<div id="pagestats"></div>
<script>
<!--                               Hide from non-JS browsers
    var scnWid,scnHei;
    if (self.innerHeight) // all except Explorer
    {
        scnWid = self.innerWidth;
        scnHei = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight)
        // Explorer 6 Strict Mode
    {
        scnWid = document.documentElement.clientWidth;
        scnHei = document.documentElement.clientHeight;
    }
    else if (document.body) // other Explorers
    {
        scnWid = document.body.clientWidth;
        scnHei = document.body.clientHeight;
    }
    setTimeout("document.getElementById('pagestats').innerHTML='W:'+scnWid+' x H:'+scnHei+'';",7000);
// -->
</script>

【讨论】：

【解决方案4】：

<script type="text/javascript">

window.fbAsyncInit = function() {

    FB.init({
        appId: 'APP_ID',
        status: false,
        cookie: true,
        xfbml: true
    });

    FB.XFBML.parse();

    FB.Canvas.setSize({ width: '520px', height: '1580px' });        

    FB.Canvas.scrollTo(0,0);
  };
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));

</script>

【讨论】：