19

正如我们所知，Facebook 已经为 Pages 引入了 iframe 选项卡。我开发了一个应用程序并在配置文件页面中添加了应用程序的选项卡，根据更新“页面的 iframe 选项卡”，应用程序选项卡在 iframe 中打开。问题是页面高度未调整，无法移除滚动条以显示没有滚动条的完整页面。我发现的所有解决方案都适用于应用程序画布页面，但不适用于应用程序选项卡页面。

我们怎么能做到这一点？

4

6 回答 6

21

这很容易实现。您必须在 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 标记，它也会有所帮助。

于 2011-03-02T01:32:55.460 回答
14

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

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>

应该可以的，希望对你有帮助！

于 2011-04-05T07:42:39.647 回答
9

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>
于 2012-04-13T14:19:42.710 回答
6

为每个有问题的人更新代码：

1）将您的应用程序“画布高度”设置为“流体”。

2) 在结束 <body> 标记之前复制并粘贴以下代码。

<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>
于 2012-11-01T16:27:05.180 回答
2

嘿伙计们......我也遇到了问题......我尝试了无数的解决方案和建议，但他们从来没有为我工作过。在我将 jquery 库 1.6 更改为 1.5.1 之后，它就可以工作了。检查这是否是您的问题。

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

于 2011-05-20T12:43:55.783 回答
0

对于像我这样尝试了以上所有方法都无济于事的人来说，这就是最终对我有用的方法。取自此页面：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>
于 2013-01-29T14:52:48.397 回答