基于 iframe 的 Facebook 应用程序在窗口尺寸较小时出现不需要的滚动条

发布于 2024-10-02 07:51:23 字数 651 浏览 0 评论 0原文

我有这个 Facebook 应用程序配置文件页面：

http://www.facebook.com/developers/editapp.php?app_id=122313254494566#!/apps/application.php?id=122313254494566

与我的基于 iframe 的 Facebook 应用程序 Gem Spinner 相关联：

http://apps.facebook.com/gemspinner/

我所看到的是，取决于窗口高度，我的 iframe 内容将以固定高度和滚动条显示，而不是像我希望的那样仅沿着页面向下流动（并在必要时离开页面底部）。当我缩短窗口时，会出现滚动条；当我使窗口变高时，滚动条消失。我的理解是 Facebook 决定了这个高度并添加了滚动条（但也许我错了）。无论如何，我将不胜感激任何有助于理解这一点并让我的内容在必要时在页面上流动的帮助。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉态萌生 2024-10-09 07:51:23

好吧，我做了一些事情来让它发挥作用。

(1) 在我的应用程序设置中，在 Facebook 集成选项卡下的 IFrame 大小下，我选择了自动调整大小而不是显示滚动条。

(2) 我加载了 Facebook connect API（参见下面的代码）。

(3)我在两个不同的地方调用了FB.Canvas.setAutoResize(100)。我调用了两次，因为我不清楚哪个位置能让它更快生效。在早期测试中，我看到 iframe 高度一开始很短（可能是 800 像素高），然后增长到内容的完整大小（可能是 1100 像素高）。在后续测试中，iframe 会立即调整大小，因此我看不到这两种状态。所以我不太清楚这里的时间/机制。

  <body>
    <div id="fb-root">
    </div>
    <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
    <script type="text/javascript">
      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  : false  // parse XFBML
      });
      FB.Canvas.setAutoResize( 100 );
    </script>

    ... the rest of the page body goes here ...

    <script type="text/javascript">
      FB.Canvas.setAutoResize( 100 );
    </script>
  </body>

Well, I did a few things to get it to work.

(1) In my application settings, under the Facebook Integration tab, under IFrame size, I chose Auto-resize instead of Show scrollbars.

(2) I loaded the Facebook connect API (see code below).

(3) I called FB.Canvas.setAutoResize( 100 ) in two different places. I call it twice because it wasn't clear to me which location would make it take effect more quickly. In early testing, I was seeing the iframe height start out short (maybe 800 pixels tall) and then grow to the full size of my content (maybe 1100 pixels tall). In subsequent tests the iframe resizes immediately so I don't see the two states. So I'm not totally clear on the timing/mechanism here.

  <body>
    <div id="fb-root">
    </div>
    <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
    <script type="text/javascript">
      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  : false  // parse XFBML
      });
      FB.Canvas.setAutoResize( 100 );
    </script>

    ... the rest of the page body goes here ...

    <script type="text/javascript">
      FB.Canvas.setAutoResize( 100 );
    </script>
  </body>

回复收藏 0 原文

~没有更多了~