iframe-based facebook app gets unwanted scroll bar

2019-04-14 22:26发布

站内问答 / 移动开发
959 1 2

I have this Facebook application profile page:

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

which is associated with my iframe-based Facebook application, Gem Spinner:

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

What I'm seeing is that, depending on the window height, my iframed content will appear with a fixed height and a scroll bar, instead of just flowing down the page (and off the bottom of the page, as necessary), as I would like. When I make the window shorter, the scroll bar appears; when I make the window taller, the scroll bar disappears. My understanding is that it's Facebook determining this height and adding the scroll bar (but maybe I'm wrong about that). In any case, I would appreciate any help in understanding this and letting my content flow down the page as necessary.

1条回答
走好不送
2楼-- · 2019-04-14 22:45

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人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)