Question

我们知道Facebook已经推出了iframe Tabs for Pages。我开发了一个应用程序，并在个人资料页面中添加了应用程序的选项卡，根据更新的“iframe Tabs for Pages”在iframe中打开了应用程序选项卡。问题是页面高度未调整，无法删除滚动条以显示没有滚动条的完整页面。我找到的所有解决方案都适用于Application画布页面，但不适用于Application Tab页面。

我们怎么能这样做？

Answer 1

很容易实现。您必须在Facebook集成选项卡中将应用程序设置为 IFRAME ，并将框架的大小设置为“自动调整大小”。

现在，在您的服务器上，您必须在</BODY>标记之前添加以下代码：

<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    FB.Canvas.setSize();
</script>

这将自动调整大小。如果您将 overflow：hidden 添加到BODY标记，也会有所帮助。

Answer 2

以下指南帮助我解决了同样的问题：

http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/

简而言之，请执行以下操作：

将“IFrame尺寸”更改为“自动调整大小”
加载Facebook的Javascript SDK

在索引页的</body>标记之前添加以下代码：

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

使用FB.Canvas.setSize（）

将以下代码放在</head>标记之前：

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

应该这样做，希望它有所帮助！

Answer 3

facebook最近改变了一些东西，现在你的标签文件也需要fb.init方法。否则调整大小不会工作。所以也可以在标签页中使用它

    <script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() 
{
    FB.init({ appId: 'YOUR APP ID', 
    status: true, 
    cookie: true,
    xfbml: true,
    oauth: true});

    FB.Canvas.setAutoResize();
    FB.Canvas.setAutoGrow();
}
    </script>

Answer 4

为遇到问题的每个人更新了代码：

1）将您的应用程序“Canvas Height”设置为“Fluid”。

2）在结束＆lt; body＆gt;之前复制+粘贴以下代码标签

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  // Called when FB SDK has been loaded
  window.fbAsyncInit = function () {
    // Initialize the FB javascript SDK
    FB.init({
      appId: '[YOUR APP ID]',
      status: true,
      cookie: true,
      xfbml: true
    });

    // Auto resize FB Canvas
    FB.Canvas.setAutoGrow();
  };

  // Load the FB SDK Asynchronously
  (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>

Answer 5

嘿伙计们......我也遇到了问题..我尝试了无数的解决方案和建议，但他们从未为我工作过。在我将jquery库1.6更改为1.5.1后，它工作了。检查这是不是你的问题。

现在我想知道为什么它不适用于jquery的1.6版本。

Answer 6

对于像我这样尝试了以上所有方面都无济于事的人来说，这就是最终对我有用的东西。摘自此页：https://www.facebook.com/note.php?note_id=10150149060995844

在</head>之前：

<script type="text/javascript">

window.fbAsyncInit = function() {

FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });

}

// Do things that will sometimes call sizeChangeCallback()

function sizeChangeCallback() {

FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });

}

</script>

然后在</body>之前：

<script type="text/javascript">

                FB.init({
                    appId: 'XXXXXXXXXXX', //Your facebook APP here
                    status: true, // check login status
                    cookie: true, // enable cookies to allow the server to access the session
                    xfbml: true// parse XFBML
                });

        </script>

设置Facebook个人资料页面的iframe选项卡的高度

6 个答案: